1. 什么是组件化开发
组件化开发指的是：根据封装的思想，把页面上可重用的 UI 结构封装为组件，从而方便项目的开发和维护。
2. vue 中的组件化开发
vue 是一个支持组件化开发的前端框架。
vue 中规定：组件的后缀名是 .vue。之前接触到的 App.vue 文件本质上就是一个 vue 的组件。
3. vue 组件的三个组成部分
每个 .vue 组件都由 3 部分构成，分别是：
template -> 组件的模板结构
script -> 组件的 JavaScript 行为
style -> 组件的样式
其中，每个组件中必须包含 template 模板结构，而 script 行为和 style 样式是可选的组成部分。
3.1 template
vue 规定：每个组件对应的模板结构，需要定义到 <template>节点中。
注意：
template 是 vue 提供的容器标签，只起到包裹性质的作用，它不会被渲染为真正的 DOM 元素
template 中只能包含唯一的根节点
只能有一个跟节点，解决方案就是在外面在套一层div
3.2 script
vue 规定：开发者可以在<script>节点中封装组件的 JavaScript 业务逻辑。
<script>节点的基本结构如下：
.vue 组件中的 data 必须是函数
vue 规定：.vue 组件中的 data 必须是一个函数，不能直接指向一个数据对象。 因此在组件中定义 data 数据节点时，下面的方式是错误的：
会导致多个组件实例共用同一份数据的问题，请参考官方给出的示例：
原先什么用，现在就什么用，除了data比较特殊，要用到函数的方式
3.3 style
vue 规定：组件内的<style>节点是可选的，开发者可以在<style>节点中编写样式美化当前组件的 UI 结构。
<script>> 节点的基本结构如下：
让 style 中支持 less 语法
在<style>标签上添加 lang="less"
加一个lang属性
4. 组件之间的父子关系
组件在被封装好之后，彼此之间是相互独立的，不存在父子关系
使用组件的时候，根据彼此的嵌套关系，形成了父子关系、兄弟关系
4.1 使用组件的三个步骤
步骤1：使用 import 语法导入需要的组件
步骤2：使用 components
步骤3：以标签形式使用刚才注册的组件
在VScode中配置@提示的插件
复制到setting.json 中
// 导入文件时是否携带文件的扩展名
"path-autocomplete.extensionOnImport": true,
// 配置@的路径提示
"path-autocomplete.pathMappings": { "@": "${folder}/src" },
4.2 通过 components 注册的是私有子组件
例如：
在组件 A 的 components 节点下，注册了组件 F。
则组件 F 只能用在组件 A 中；不能被用在组件 C 中。
请大家思考两个问题：
① 为什么 F 不能用在组件 C 中？
② 怎样才能在组件 C 中使用 F？
4.3 注册全局组件
在 vue 项目的 main.js 入口文件中，通过 Vue.component() 方法，可以注册全局组件。示例代码如下：
这里可以使用插件来一键生成代码,输入<
