vue组件一直注册不了_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'