美文网首页
Vue 组件批量注册

Vue 组件批量注册

作者: almj | 来源:发表于2021-01-04 13:05 被阅读0次

    Vue应用有时候组件多了,一个一个注册引用很麻烦,其实可以把组件文件夹批量注册,然后按需引用。
    首先在组件文件夹里创建一个 index.js 的文件,里面写扫描此路径下所有组件的逻辑:

    //扫描此文件夹下的所有的`.vue` 文件,并注册
    const componentsWatcher = scanner => {
      scanner.keys().map(key => {
        let name = scanner(key).default.name
        if (name) {
          Vue.component(name, function(resolve) {
            require([key + ''], resolve)
          })
        }
      })
    }
    //扫描匹配条件
    const vueScanner = require.context(
      '@/components',
      true,
      /^\.\/((?!\/)[\s\S])+\/index\.vue$/
    )
    
    //扫描
    componentsWatcher(vueScanner)
    
    image.png

    在把 components 文件夹引入到main.js

    
    (() => {
      Promise.all([
        import('@/components'),
        import('./App.vue'),
        import('./router'),
        import('./store')
      ]).then(([{ default: App }, { default: router }, { default: store }]) => {
        new Vue({
          el: '#app',
          router,
          store,
          render: h => h(App)
        })
      })
    })()
    

    这样只要把组件放在components文件夹下面,不需要注册,调用的地方按需引用直接调用即可:

    import { myComponent } from '@/components'
    

    相关文章

      网友评论

          本文标题:Vue 组件批量注册

          本文链接:https://www.haomeiwen.com/subject/ubxvoktx.html