Vue自动化注册全局组件脚本分享

Vue.component(name, instance)

export function autoLoadingGlobalComponent() {
  const requireComponent = require.context(
    // 其组件目录的相对路径
    '../components',
    // 是否查询其子目录
    false,
    // 匹配vue后缀文件名的文件
    /\.vue$/
  )
  // 遍历获取到的文件名，依次进行全局注册
  requireComponent.keys().forEach(fileName => {
    // 获取组件配置(实例)
    const componentConfig = requireComponent(fileName)
    // 获取组件的 PascalCase 命名(eg: MYHeader)
    const componentName = _.upperFirst(
      // 获取驼峰式命名
      _.camelCase(
        // 剥去文件名开头的 `./` 和结尾的扩展名 eg: ./food-header.vue -> foodHeader
        fileName.replace(/^\.\/(.*)\.\w+$/, '$1')
      )
    )
      // 全局注册组件
    Vue.component(
      componentName,
      // 如果这个组件选项是通过 `export default` 导出的，
      // 那么就会优先使用 `.default`，
      // 否则回退到使用模块的根。
      componentConfig.default || componentConfig
    )
  })
}

import vue from 'vue'
const requireComponent = require.context( // webpack的api，一个函数方法，匹配文件
  '.', // 查看当前目录下的文件(查找需要文件的相对路径)
  false, // 不查看子文件
  /.vue$/ // 匹配方式正则表达式，只查看后缀为.vue的文件
)
console.log(requireComponent)
// 循环获取到的文件，可在循环时处理文件名
requireComponent.keys().forEach((fileName) => {
  console.log(1)
  // 获取组件配置(组件模板)
  const componentConfig = requireComponent(fileName)
  // 将被注册的组件名字,对获取的组件文件名进行处理
  const componentName = fileName
    .replace(/^\.\/_/, '')
    .replace(/\.\w+$/, '')
    .split('./')
    .join('')
  console.log(componentName, '基础组件文件获取测试')
  // 将组件在循环中注册到全局，
  vue.component(componentName, // 依据文件名处理好的，将要被注册到全局的组件名
    componentConfig.default || componentConfig)
})

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.CSS'
import './components/component/_globals' // 直接引入共享到全局即可实现自动化组件注册
Vue.config.productionTip = false
Vue.use(ElementUI)
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')