一、单文件组件

Vue 中所有以 .vue 为后缀名的文件，每一个文件都是一个组件。每一个单文件组件有由以下三部分组成：

  1. <template>
  3. </template>
  4. <script>
  5. export default {
  7. }
  8. </script>
  9. <style>
  11. </style>

二、组件分类

Vue 中的组件分为全局组件和局部组件。

1、全局组件

我们通常会在项目页面一加载时，就先将所有的全局组件都注册好。所以我们需要在项目的 src/main.js 中，来实现全局组件的注册。
首先，先创建一个 .vue 的单文件组件，然后在 main.js 中通过以下代码完成注册：

  1. import Hello from './components/global/Hello.vue'
  2. // 注册全局组件
  3. Vue.component('Hello', Hello);

全局组件注册成功后，在任意组件中都可以直接通过组件名使用。

  1. <Hello></Hello>

2、局部组件

局部组件，首先也需要先创建一个 .vue 的单文件组件，然后在需要使用的组件中引入该局部组件：

  1. <template>
  2.     <!-- 3. 使用（渲染）组件 -->
  3.     <Counter></Counter>
  4. </template>
  5. <script>
  6.     // 1. 引入组件
  7.     import Counter from './components/counter/Counter.vue';
  8.     export default {
  9.         // 2. 注册组件
  10.         components: {
  11.             Counter
  12.         }
  13.     }
  14. </script>

每一个组件要使用一个局部子组件时，都需要先引入、注册，然后再渲染使用。

三、自动注册全局组件

我们可以通过一个 [.js](https://cn.vuejs.org/v2/guide/components-registration.html#%E5%9F%BA%E7%A1%80%E7%BB%84%E4%BB%B6%E7%9A%84%E8%87%AA%E5%8A%A8%E5%8C%96%E5%85%A8%E5%B1%80%E6%B3%A8%E5%86%8C) 文件来自动实现全局组件的注册。
在项目的 src 目录中，创建一个 utils 目录，用来存放自动注册全局组件的 js文件。

  1. src
  2.  |--- utils
  3.  |      |--- globalRegister.js

然后在 main.js 中引入该配置文件：

  1. import './utils/globalRegister.js';

以上配置完成后，后续，所有在 components/global 目录中的组件，都会自动注册为全局组件。
我们在使用 global 中的组件时就可以直接通过组件名渲染即可。