vue基础组件的自动化全局注册

女爷i 2022-12-17 07:30 210阅读 0赞

基础组件的全局化自动注册：某一些小组件在全局都会使用，而且数量比较多时，可以自动化全局注册；

如果你使用了webpack(或在内部使用了 webpack 的 [Vue CLI 3+][Vue CLI 3])，那么就可以使用require.context 全局注册这些非常通用的基础组件，

例如在components目录下有一些基础组件：

![20201023202331482.png][]

在main.js文件中：

const requireComponent = require.context(
      // 其组件目录的相对路径
      './components',
      // 是否查询其子目录
      false,
      // 匹配基础组件文件名的正则表达式
      /\.vue$/
    )
    requireComponent.keys().forEach(fileName => {
      // 获取组件配置
      const componentConfig = requireComponent(fileName) 
      // 获取组件的   命名
      const componentName = fileName.split('/').pop().replace(/\.vue$/, '')
      // 全局注册组件
      Vue.component(
        componentName,
        // 如果这个组件选项是通过 `export default` 导出的，
        // 那么就会优先使用 `.default`，
        // 否则回退到使用模块的根。
        componentConfig.default || componentConfig
        // 使用的时候直接用组件的文件名字就可以了
      )
    })
    
    new Vue({
      router,
      store,
      render: h => h(App)
    }).$mount('#app')

然后使用的时候可以使用文件名字：例如  <BasecompA></BasecompA>

注意：这种注册方式，我简化了，只要文件名字中没有特殊符号就可以；如果有的话，看vue官网的注册方式；[https://cn.vuejs.org/v2/guide/components-registration.html][https_cn.vuejs.org_v2_guide_components-registration.html]

[Vue CLI 3]: https://github.com/vuejs/vue-cli
[20201023202331482.png]: /images/20221123/40920e6fcb124f0483fa68152756c7a5.png
[https_cn.vuejs.org_v2_guide_components-registration.html]: https://cn.vuejs.org/v2/guide/components-registration.html