Vue CLI: 安装、项目创建及基本概念指南，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：![请添加图片描述](https://i-blog.csdnimg.cn/direct/f86b41ec032348de847c7776c25b1483.png) sudo npm i @vue/cli -g
• 测试：vue --version

创建项目

1. 打开命令行窗口，执行命令 vue create 项目名称
   1. 项目名称必须英文
   2. 项目名称不能和包名重名

2. 选择创建方式，默认创建，自定义创建
   

3. 等待安装项目依赖的包
   

4. 创建成功
   

5. 启动项目 (在项目根目录下执行 npm run serve)

6. 启动成功
   

7. 去浏览器访问 http://localhost:8080
   

入口文件

• 作用
  • 在vue-cli的项目中，是以单个文件作为组件进行开发，也是以模块的方式进行开发
  • 项目中拥有很多文件，像是css、js组件
  • 通过main.js去整合所有的拆分的文件，导入到main.js里面来，通过vue-cli合并所有的文件在一个页面中进行预览

修改文件夹名称的步骤

1. 退出vue运行，修改创建的demo1文件夹的名称为实际项目名称，例如 改成demo2
2. 删除node_modules文件夹
3. 修改package.json中的项目名称为项目实际名称demo2
4. 修改public文件夹里面的index.html的title为项目实际名称demo2
5. 修改完成，执行 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：离开后
• 在不同阶段,改变元素或组件的样式属性,然后添加过滤效果,即可实现动画