Vue（五）：组件的注册

1、组件的注册
　　1）、全局注册
　　第一个参数是组件的名称，第二个参数就是组件对象，这个对象可以把之前介绍的组件属性，根据需要添加进去。

import Vue from "vue";
Vue.component('first-component',{template:'<span>第一个组件,全局类型</span>'})//创建全局组件，需要引入vue

　　2）、局部注册
　　局部注册和全局注册的区别就是字面上的意思。但是需要注意的是局部的对象名称中不能带“-”字符，但是我们引入到组件中时一定要加上这个字符，省的因为大小写出现未知的错误。如果不需要，也可以像demo一样直接写进components属性中

var SecondComponent ={template:'<span>第二个组件，局部类型</span>'}
var demo={template:'<span>第二个组件，局部类型</span>'}
export default {
  components:{"second-component":SecondComponent,demo}  //局部注册需要在components选项中定义你想要使用的组件
}

　　3）、自动全局注册
　　这个是官网给出的示例代码，一笔没改。要求是使用了 webpack (或在内部使用了 webpack 的 Vue CLI 3+)，位置呢是在应用入口文件 (比如 src/main.js) 中。需要注意的是该全局注册的行为必须在根 Vue 实例 (通过 new Vue) 创建之前发生，而且如果你要移动代码的位置需要注意更改一下目录的相对路径什么的。组件也必须是Base开头，为啥呢，因为正则是这样写的，也可以改

import Vue from 'vue'
import upperFirst from 'lodash/upperFirst'
import camelCase from 'lodash/camelCase'

const requireComponent = require.context(
  // 其组件目录的相对路径
  './components',
  // 是否查询其子目录
  false,
  // 匹配基础组件文件名的正则表达式
  /Base[A-Z]\w+\.(vue|js)$/
)

requireComponent.keys().forEach(fileName => {
  // 获取组件配置
  const componentConfig = requireComponent(fileName)

  // 获取组件的 PascalCase 命名
  const componentName = upperFirst(
    camelCase(
      // 获取和目录深度无关的文件名
      fileName
        .split('/')
        .pop()
        .replace(/\.\w+$/, '')
    )
  )

  // 全局注册组件
  Vue.component(
    componentName,
    // 如果这个组件选项是通过 `export default` 导出的，
    // 那么就会优先使用 `.default`，
    // 否则回退到使用模块的根。
    componentConfig.default || componentConfig
  )
})