如何在项目里面优雅的全局注册组件？

记一笔：项目中还在为各种繁杂的组件眼花缭乱？；如何减少维护的成本，就是本文中要讲到的。（vue中的实现）

    #常用的注册方式
    import Button from './button'
    ...
    components:{
        Button:Button,
        ....
    }

    ##这样是不是很麻烦？组件一多，不是很方便维护。
    
复制代码

推荐：

webpack里面的require.context（'文件夹路径'，'是否遍历子目录'，'文件后缀名'）;

_.camelCase() 和 _.upperFirst()是lodash中的方法;

    //全局注册组件
    const requireComponent = require.context('./mycomponents', true, /\.vue$/)
    requireComponent.keys().forEach(fileName => {
            // 获取组件配置
            const componentConfig = requireComponent(fileName)
            const componentName = _.upperFirst(
                _.camelCase(fileName.replace(/^\.\//, '').replace(/\.\w+$/, ''))
            )
            // 全局注册组件
            Vue.component(componentName, componentConfig.default || componentConfig)
            console.log(componentName)
        })
复制代码

向下看：

相同的原理，我们也可以处理其他的例如vue-router和vuex

#这是我vuex文件中的一段代码，因为项目中模块太多，我也采用了这种方式！

const requireModule = require.context('./modules/', true, /\.js$/); 
const modules = {};
requireModule.keys().forEach(fileName => {
  ## Don't register this file as a Vuex module
  if (fileName === './index.js') return
  const moduleName = _.camelCase(
    fileName.replace(/(\.\/|\.js)/g, '')
  )
  modules[moduleName] = {
    namespaced: false,
    ...requireModule(fileName).default
  }
})

export default new Vuex.Store({
  modules
})

复制代码

这样的方式，方便了我们的管理。

转载于:https://juejin.im/post/5ae3cfd1f265da0b7b35a6c9