2021-04-23

vue-cli

1. 安装 vue-cli：
   在终端中执行： npm install -g @vue/cli

2. 创建项目：
   vue create my-project // my-project 是项目名字， 可自定义
   以下为选项：
   manually select features

    Babel
    CSS Pre-processors
   
    Sass/Scss (with node-sass)
   
    In package.json
   

3. 项目介绍：

   1. package.json // 项目描述文件
   2. public // 项目公共静态资源文件夹
   3. src // 项目源码文件夹 （在这个文件夹中开发）
   4. main.js // 项目入口文件
   5. App.vue // 项目根组件

   开发中需要的 webpack 配置 脚手架工具已经帮我们配置好了，所以开发人员只需把精力放在业务开发上就好了。

4. .vue 文件介绍：
   一个 .vue 文件就是一个 Vue 的实例。
   一个 .vue 文件就是一个 vue 的组件。
   每个组件是在 HTML CSS JS 层的综合封装。 （我们之前学的 js 模块化仅仅是在 JS 层的封装）
   每个组件可以有自己的 HTML 模板，CSS 样式和 JS 逻辑。

   组件的优势：

   1. 封装
   2. 复用

   分别对应文件中的三块内容：

       <!-- 模板 -->
       <template>
           <div>
               <span>hello</span>
           </div>
       </template>
   
       <!-- 数据 -->
       <script>
       export default {
   
       }
       </script>
   
       <!-- 样式 -->
       <style>
   
       </style>
   

    注意：
    1：组件选项中没有 `el` 选项
    2：组件的 `data` 选项必须是函数
    3：组件必须是单个根元素
   

5. 在父组件中使用子组件：

       // 1: 引入组件
       import One from './components/one';
       import Two from './components/two';
   
       // 2：注册组件
       components: {
           One,
           Two
       }
   
       // 3: 使用组件
       <one></one>
       <two></two>
   

6. 组件的生命周期：
   一个vue组件的从一开始创建到最后销毁的整个过程可分为下三个阶段：this创建阶段 挂载阶段 销毁阶段。

   1. this创建阶段 create 在这个阶段前后vue分别会调用 beforeCreate created
      这个阶段主要做的事是：往this上添加属性：data props computed methods

   2. 挂载阶段 mounte 在这个阶段前后vue分别会调用 beforeMount mounted
      这个阶段主要做的事是：渲染dom，挂载到页面。

   3. 销毁阶段 destroy 在这个阶段前后vue分别会调用 beforeDestroy destroyed
      这个阶段主要做的事是：销毁组件。

   这些被调用的函数被称为：生命周期函数 或者 生命周期钩子。

   如果父组件中有子组件，在挂载阶段的时候父组件的生命周期会暂停，
   开始子组件的创建过程，等子组件挂载完毕，子组件的mounted函数被调用后，再回过头来继续父组件的生命周期。