基于webpack+Vue3+JavaScript+antd+less+axios技术栈实现所有组件全局自动化注册
一、前言
最近在做一个项目，因为项目比较小，用户群体年龄跨度较大，同时对兼容性的要求较高，所以选择webpack+Vue3+JavaScript+antd+less+axios的技术栈，在开发的当中发现一个问题，原来在vue2当中，可以很简单就能实现的组件的全局自动化注册，在当前这套技术栈组合中不能使用，网上的教程大多都是偏向于typescript的，所以决定自己写一个。
二、实现方案
1、新建registerComponents.js文件
const requireComponent = require.context('@/',true,/\.vue$/
);export default {install(app) {requireComponent.keys().forEach((fileName) => {// 去掉路径和扩展名，获取组件名const componentName = fileName.replace(/(\.\/|\.vue)/g, '').replace(new RegExp('/', 'g'), "");const defaultObj = requireComponent(fileName).default;app.component(componentName, defaultObj)console.log(componentName,defaultObj);});}
}
2、main.js文件引入registerComponents.js文件，并实现组件全局自动化注册
import { createApp } from 'vue'
import App from './App.vue'
const app = createApp(App);
//全局组件自动注册
import registerAllComponents from './utils/registerComponents'
app.use(registerAllComponents).mount('#app')；
自此就实现基于webpack+Vue3+JavaScript+antd+less+axios技术栈的组件全局自动化注册。
如觉的写的不错，欢迎评论讨论，本文为原创，如需转载请标明出处；