Vue CLI: 安装、项目创建及基本概念指南，vue生命周期

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

作用：用来约定模块(一个js文件就会少一个模块，模块拥有自己的作用域)的导入和导出
默认导入与导出
- 导入：import 变量名 from '包名|js模块路径'
- 导出：export default 导出内容
按需导入与导出
- 导入：import {成员变量名1,成员变量名2} from '包名|js模块路径'
- 导出：export const 成员变量名= '导出内容'

生命周期指的是一个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 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁