记录一下Vue项目中批量注册全局组件

一、首先我们在components文件夹中创建一个library文件夹用于存放全局组件

二、其次我们在library文件夹中新建一个index.js文件用于处理全局组件的读取和定义

src/components/library/index.js

//首先我们要导入library文件下的所有组件
//批量导入需要使用一个函数：require.context(dir,dee,matching)
//各参数的意思:1、目标目录 2、是否加载子目录 3、加载的正则匹配
const importFn = require.context('./','false','/\.vue$/')

export default {
//此时我们获取到了所有组件 而importFn.keys() 表示的是文件名称数组

//当你在main.js导入 并且使用Vue.use的时候就会执行install函数 并且他会传入Vue实例 我们使用app来接收
install(app){
//使用forEach遍历组件名称数组进行批量注册
importFn.keys().forEach(key=>{
//导入组件
const component = importFn(key).default
//注册组件
app.component(component.name,component)
})
}
}

三、我们只需要在main.js中引入该文件并且use即可

main.js

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

// 自定义的全局插件
import UI from '@/components/library/index.js'
// 重置样式库
import 'normalize.css'
// 自己项目重置样式和公用样式
import '@/assets/styles/common.less'

createApp(App).use(store).use(router).use(UI).mount('#app')