Vue 组件批量注册

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'
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 在一些大中型项目中,一个页面涉及的组件可能非常多,有些共有的组件单个引入的话,代码就显得非常冗余了,这时我们可以用...
    姜治宇阅读 2,898评论 0 0
  • UI组件是对一组相关的交互和样式的封装,提供了简单的调用方式和接口,让开发者能很便捷地使用组件提供的功能来实现业务...
    Awey阅读 12,779评论 20 45
  • 在公共组件中多次引入的问题。如某个组件使用频次在两次以上,建议注册为全局组件,以便后续开发便捷使用,防止在父组件中...
    前端阿峰阅读 2,319评论 3 4
  • 上一篇文章http://www.jianshu.com/p/674e75b41642介绍了项目里文件夹的作用分类和...
    威少_吴阅读 1,286评论 0 4
  • Vue可以通过全局注册来实现全局组件的功能,比如有这么一个组件exampleComponent,如果想把它注册成全...
    乌罗阅读 6,080评论 3 2