一、前言
vue语法的内容，通过前面两章的学习已经差不多了，所以本章开始学习vue中另一个非常重要的部分：组件。
因为前面章节主要vue语法特性特性的缘故，为了减轻大家的认知负担、我都尽可能的只在一个叫做App.vue文件中完成的。
而这种以.vue结尾的文件，在vue中被称为组件，并且这个App.vue是整个vue项目的根组件，
之所以App.vue为根组件，是因为我们的入口js文件中用的它来创建整个vue实例：
虽然你也可以改为其它的，但一般情况下都是直接默认即可。
二、组件基础
这部分内容你也可以对照官方文档查看组件基础，正如官方所说，组件的基本作用其实就是复用。
比如下图这个由官网提供的图片示例：
左边就是一个基本的页面样式，并抽象出了右边的代码结构。
Root便代表了我们整个页面，并且Root可以由三部分组成：Header、Main、Aside。
然后这三个又可以继续由其它部分组成，成为一种树形的嵌套结构。
vue组件的基本思想就是，能不能将这结构上的每一个结点都抽象成为一个组件。
比如这里的Header，即页头嘛，你可能很多页面都会用到，甚至其它项目也能用到。
如果能把它抽象成为一个组件，那么其它任何地方只要想用，直接将这个组件复制、引入进项目中即可。
这就完成了代码的复用！
而且最重要的是，vue中一个组件包含了html、js、css这三个部分，所以即使你引入到其它项目中，也是可以直接使用的，而无需额外调整。
而传统的复用方式很多都是三种代码分开存放，这就导致即使你引入，想要复用大多数时候也都还需要继续调整才行。
理解了组件的基本来历与用途，下面我们就来看看怎么用。
正如前面所说，一个组件就是一个.vue结尾的文件，官方常称其为“单文件组件”（SFC，Single File Component）。
一般我们都会将组件创建在这个components文件夹下：
然后在这个组件中写好三个基本的标签即可。
