只有经历地狱般的磨砺，才能练就创造出天堂的力量；只有流过血的手指，才能弹奏出世间绝唱
文章目录
- vue-cli
- 介绍
- 安装
- 创建项目
- 入口文件
- 修改文件夹名称的步骤
- ES6模块化
- 单文件组件
- vue生命周期
- vue动画
vue-cli
介绍
- vue-lic是一个开发vue项目的脚手架工具，可以提供基于vue项目架子的快速创建，称为一套标准。
- 统一的项目结构
- 提供了开发过程中的系列工具
- babel：语法降级
- eslint：约束语法风格
- less：预处理器
- 提供了一个开发服务器，方便预览
- 自动刷新浏览器，方便预览
- 热更新功能，有些资源的更改，不需要刷新浏览器，立即更新，进行预览
安装
- npm安装：
npm i @vue/cli -g； yarn安装：yarn add @vue/cli global- 成功：安装日志中没有任何关于error、err相关的日志，代表成功
- 关于安装报错的问题
- 90%是网络问题，需要多试试
- 如果安装慢，使用淘宝镜像
- windows：
npm i @vue/cli -g --registry=https://registry.npm.taobao.org - mac：
 sudo npm i @vue/cli -g
- windows：
- 测试：
vue --version
创建项目
-
打开命令行窗口，执行命令
vue create 项目名称
1. 项目名称必须英文
2. 项目名称不能和包名重名 -
选择创建方式，默认创建，自定义创建
-
等待安装项目依赖的包
-
创建成功
-
启动项目 (在项目根目录下执行
npm run serve) -
启动成功
-
去浏览器访问
http://localhost:8080
入口文件
- 作用
- 在vue-cli的项目中，是以单个文件作为组件进行开发，也是以模块的方式进行开发
- 项目中拥有很多文件，像是css、js组件
- 通过main.js去整合所有的拆分的文件，导入到main.js里面来，通过vue-cli合并所有的文件在一个页面中进行预览
修改文件夹名称的步骤
- 退出vue运行，修改创建的demo1文件夹的名称为实际项目名称，例如 改成demo2
- 删除node_modules文件夹
- 修改package.json中的项目名称为项目实际名称demo2
- 修改public文件夹里面的index.html的title为项目实际名称demo2
- 修改完成，执行 npm i ，创建node_modules文件夹，然后 npm run serve 运行项目，并使用浏览器访问
ES6模块化
- 作用：用来约定模块(一个js文件就会少一个模块，模块拥有自己的作用域)的导入和导出
- 默认导入与导出
- 导入：
import 变量名 from '包名|js模块路径' - 导出：
export default 导出内容
- 导入：
- 按需导入与导出
- 导入：
import {成员变量名1,成员变量名2} from '包名|js模块路径' - 导出：
export const 成员变量名= '导出内容'
- 导入：
单文件组件
- 不管是何种注册方式，每个组件必须有一个组件配置化对象
现在定义组件 - 以
.vue文件的方式来定义组件，文件的内容代表的是：组件配置对象 - 需要渲染这个组件
- 使用这个配置对象进行全局注册或者局部注册，再来使用
- 使用路由规则中的component选项指定路由配置对象
- 称为：单文件组件
vue生命周期
生命周期指的是一个vue实例，从创建到销毁的过程。在生命过程中，每到一个时间点，vue会触发某个函数，回调函数，生命周期钩子函数
- 创建阶段
beforeCreate()：在实例初始化之后，数据观测 (data observer) 和事件配置之前被调用。此时，实例还未开始初始化 $data 对象created()：在实例创建完成后立即调用。此时，实例已完成以下配置：数据观测、属性和方法的运算、watch/event 事件回调。然而，挂载阶段还未开始，$el 属性目前不可见
- 挂载阶段
beforeMount()：在挂载开始之前被调用，相关的 render 函数首次被调用。此时，模板编译已经完成，但尚未渲染到页面上mounted()：实例被挂载后调用，此时，el 被新创建的 vm.$el 替换，并插入到 DOM 中。在这个阶段，可以直接访问 DOM 元素
- 更新阶段
beforeUpdate()：数据更新时调用，发生在虚拟 DOM 打补丁之前。这里适合在更新之前访问现有的 DOM，例如手动移除已添加的事件监听器updated()：由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。当这个钩子被调用时，组件 DOM 已经更新，可以执行依赖于 DOM 的操作
- 销毁阶段
beforeDestory()：实例销毁之前调用。在这一步，实例仍然完全可用destoryed()：实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁
vue动画
- 提供了进入和离开时候的动画实现，也就是一个进场动画和离场动画的实现
- 提供了创建显示元素或组件，移除隐藏元素或组件，过程中的动画
- 显示/创建 (元素|组件)
v-enter：进入前v-enter-active：进入中v-enter-to：进入后
- 隐藏/移除 (元素|组件)
v-leave：离开前v-leave-active：离开中v-leave-to：离开后
- 在不同阶段,改变元素或组件的样式属性,然后添加过滤效果,即可实现动画
