一、生命周期

Vue 的生命周期：一个 Vue 实例从创建到销毁的整个过程，new Vue() 创建实例，网页关闭销毁实例。

生命周期的四个阶段：创建、挂载、更新、销毁。

Vue生命周期过程中，会自动运行一些函数，被称为生命周期钩子，让开发者可以在特定阶段运行自己的代码。响应式数据创建完之后，才可以发送初始化渲染请求，挂载完之后，才可以操作 dom。

这些方法需与 data 同级使用，方法体内编写自定义语句。

<script>//一旦引入VueJS核心包，在全局环境，就有了Vue构造函数const app = new Vue({el: '#app',data: {obj: {words: '',count: ''}},beforeCreate() {console.log('响应式数据准备好之前')},created() {console.log('响应式数据准备好之后')},beforeMount() {console.log('模板渲染之前')},mounted() {console.log('模板渲染之后')},})</script>

二、工程化开发

开发 Vue 的两种方式：
① 核心包传统开发，直接引入 Vue 核心包开发；
② 工程化开发，基于构建工具开发（例如 webpack）。

1. 脚手架介绍

Vue CLI 是 Vue 官方提供的一个全局命令工具，可以帮助我们快速创建一个开发 Vue 项目的标准化基础架子，集成了 webpack 配置。

好处：
① 开箱即用，零配置；
② 内置了 babel 等工具；
③ 标准化 。

2. 使用步骤

① 全局安装，yarn global add @vue/cli 或 npm i @vue/cli -g

② 查看 Vue 版本，vue --version

③ 创建项目架子，vue ceate project-name

项目名不能用中文，想在哪里创建项目，就在哪里打开 cmd 窗口。

然后通过上下键选择 Vue2，点回车创建架子：

④ 启动项目，首先通过 cd 项目名 进入项目目录，然后输入 yarn serve 或 npm run serve 启动项目。

3. 目录文件介绍

在VSCode 中打开项目，Ctrl + ` 启动终端，输入 npm run serve 运行项目

项目运行流程：先运行 main.js → 导入 Vue → 导入 App.vue → 实例化 Vue，基于 App.vue 创建结构，最后渲染到 index.html 容器！

4. 组件化开发

组件化：一个页面可以拆分成一个个的组件，每个组件有着自己独立的结构、样式和行为。
好处：便于维护，利于复用，提升开发效率。
组件分类：普通组件和根组件（App.vue），根组件是整个应用最上层的组件，包裹所有普通小组件

组件由三部分组成：结构（template）、行为（script）和样式（style），结构里面有且只能有一个根元素，js 逻辑写在 export default 里面。

语法高亮插件：Vetur

<template><!--根元素的类名最好与当前的组件名同名--><div class="App"><div class="box" @click="fn"></div></div>
</template><script>
/*** 导出的是当前组件的配置项* 里面可以提供data、methods、computed、watch、生命周期*/
export default {methods: {fn() {alert('栈老师你好！')}}
}
</script><style>
.App {width: 400px;height: 400px;background-color: yellowgreen;
}
.App .box {width: 100px;height: 100px;background-color: blueviolet;
}
</style>

默认情况下是不支持 less 的，让 style 支持 less：
① 给 style 加上 lang=“less” 属性；
② 安装依赖包，yarn add less less-loader -D

快速生成组件的三部分：输入 <vue，回车！

5. 普通组件的注册

5.1 局部注册

只能在注册的组件内使用：创建 .vue 文件（三部分组成），在使用的组件内导入并注册。

① 导入组件

import 组件对象 from '.vue的文件路径'

② 注册组件

export default {components: {组件名: 组件对象}
}

组件名规范 → 大驼峰命名法，如 ZzHeader，一般来说，组件名和组件对象同名，我们直接简写一个组件对象即可。

③ 使用组件

直接当成 html 标签来使用，<组件名></组件名>

完整代码如下：

5.2 全局注册

在所有组件内都可以使用。

① 导入全局组件

import 组件对象 from '.vue的文件路径' 

② 在 main.js 中注册全局组件

Vue.component('组件名', 组件对象)

Vue.component 一次只能注册一个组件！

③ 使用组件

直接当成 html 标签来使用，<组件名></组件名>

一般情况下我们使用局部注册就可以了，如果有一些组件是通用的，那么就使用全局注册！

三、页面开发思路

① 分析页面，按模块拆分组件，搭架子；
② 根据设计图，编写组件 html 结构和 css 样式；
③ 拆分封装通用小组件，将来通过 js 动态渲染，实现功能。

当前模块的结构和样式都写在同一个 vue 里面，无需再创建单独的 css 文件，高内聚低耦合。

如果要多次渲染同一个组件，我们也可以使用 v-for 来实现：

<组件名 v-for="item in list" :key="item"></组件名>