组件是vue里面一个比较重要的点，一定要玩会，玩明白哈

组件就是对UI结构的复用

组件化开发指的是：根据封装的思想，把页面上可重用的UI结构封装为组件，从而方便项目的开发和维护

vue中规定：组件的后缀名是.vue。之前接触到的App.vue文件本质上就是一个vue的组件

私有组件注册

app.vue
    <template>
  <div id="app">
    <myComponent />
    <my-component />
  </div>
</template>

<script>
import myComponent from '@/components/myComponent'
export default {
  name: 'App',
  components: {
    myComponent
  }
}
</script>

<style lang="less"></style>

新建一个自定义组件，注意注意，一定要给我注意了，在给组件命名的时候不要起header这种名字，不然会没效果，或者报错，踩坑记录

自定义组件:
    <template>
  <div>
      <h1>home</h1>
  </div>
</template>

<script>
export default {

}
</script>

<style>

</style>

全局注册

全局组件注册就比较简单点了，直接在main.js文件内部进行一个注册就可以了，但是需要注意的是修改main.js文件后记得重启项目，缺点就是会造成项目体积变大，也就是造成了用户下载的 JavaScript 的无谓的增加

当然除了上面两种注册，在平时的项目中，还会遇到一种，自动化注册

import Vue from "vue/dist/vue.esm";

//require.context是webpack提供的api,用于做批量文件的注册和导入
let obj = require.context('../components',false,/\.vue$/)
//该函数第一个参数是文件夹的路径
//第二个是布尔值，是否递归查找该文件夹下的文件夹
//第三个正则匹配文件后缀

//在这里obj打印出来是个对象,对象的keys对应的是上下文函数，直接执行obj.keys()

//会获得一个数组，数组里面是匹配到的每个文件，既然匹配到了，直接加个循环，动态
//注册组件就好了
console.dir(obj.keys());


obj.keys().forEach(item => {
  Vue.component(obj(item).default.name,obj(item).default)
});

《Vue2.0 · 组件注册》

组件是vue里面一个比较重要的点，一定要玩会，玩明白哈

私有组件注册

全局注册