1. 什么是单文件组件？
      (1) 一个文件对应一个组件（之前我们所学的是非单文件组件，一个 html 文件中定义了多个组件）
      (2) 单文件组件的名字通常是：x.vue，这是 Vue 框架规定的，只有 Vue 框架能够认识，浏览器无法直接打开运行。需要 Vue 框架进行编译，将 x.vue 最终编译为浏览器能识别的 html js css。
      (3) 单文件组件的文件名命名规范和组件名的命名规范相同：
      1 全部小写：userlist
      2 首字母大写，后面全部小写：Userlist
      3 kebab-case 命名法：user-list
      4 CamelCase 命名法：UserList（我们使用这种方式，和 Vue 开发者工具呼应。）
      2. x.vue 文件的内容包括三块：
      (1) 结构：
      (2) 交互：
      (3) 样式：
      3. export 和 import，ES6 的模块化语法。
      (1) 使用 export 导出（暴露）组件，在需要使用组件的 x.vue 文件中使用 import 导入组件
      1 默认导入和导出
      1) export default {}
      2) import 任意名称 from ‘模块标识符’
      2 按需导入和导出
      1) export {a, b}
      2) import {a, b} from ‘模块标识符’
      3 分别导出
      export var name = ‘zhangsan’
      export function sayHi(){}
      4. VSCode 工具可以安装一些插件，这样在编写 x.vue 的时候有提示。例如：vetur 插件。
      (1) 使用该插件之后，有高亮显示，并且也可以通过输入 5. 把之前“组件嵌套”的例子修改为单文件组件

    image.png
    image.png
    auto rename tag 插件
    image.png
    image.png
    image.png
    记住一个要领：不管是单文件组件还是非单文件组件，永远都包括三步：创建组件、注册组件、使用组件。
    创建 vm 的代码就不是一个组件了，这个 js 代码写到一个 js 文件中即可，一般这个起名：main.js。寓意：入口
    image.png
    还剩最后的一点 HTML 代码，一般这个文件叫做 index.html，代码如下：
    image.png
    如上图，注意引入顺序。

    代码执行原理：
    1 第一步：浏览器打开 index.html 页面，加载容器
    2 第二步：加载 vue.js 文件，有了 Vue
    3 第三步：加载 main.js
    1) import App from ‘./App.vue’
    2) import X from ‘./X.vue’
    3) import X1 from ‘./X1.vue’
    4) import Y from ‘./Y.vue’
    5) import Y1 from ‘./Y1.vue’
    这样就完成了所有组件以及子组件的创建和注册。
    4 第四步：创建 Vue 实例 vm，编译模板语句，渲染

    写完之后不能直接运行，浏览器不认识.vue 文件，不认识 ES6 的模块化语法。需要安装 Vue 脚手架。