vue-cli 配置全局组件（手动&自动化）

手动注册全局组件

1. 在Component文件夹下配置index.js文件及对应的组件

import TableData from './TableData'
​
export default {
    install(Vue) {
        Vue.component('A', TableData)
    }
}

install(Vue) -- 使用install方法来注册组件 Vue.component('component-name',component) ‘组件名字，引用的组件’

2. 在main.js文件中导入配置好的index.js文件

import components from './components/index'
Vue.use(components)

使用Vue.use()来全局使用

自动化注册全局组件

0. 自定义文件夹

在components文件中创建一个common文件夹用于存放需要注册全局的公共组件；在common文件夹下定义index.js文件

2. 那么就可以使用 require.context 只全局注册这些非常通用的基础组件。,

import Vue from 'vue'
import upperFirst from 'lodash/upperFirst'
import camelCase from 'lodash/camelCase'
​
const requireComponent = require.context(
  // 其组件目录的相对路径
  './',
  //是否查询子目录
  true,
  // 匹配基础组件文件名的正则表达式
  /.vue$/
)
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
  )
})

3. 在main.js中引入index.js文件，这是因为全局注册的行为必须在根Vue实例（通过new vue）创建之前发生

4. 然后就可以自由的使用组件啦

注意

• 在定义公共组件时，.vue文件名必须与default中的name命名一致。当然也可以在获取组件名的时候加入固定的格式。