基于webpack+Vue3+JavaScript+antd+less+axios技术栈实现所有组件全局自动化注册

本文主要是介绍基于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技术栈的组件全局自动化注册。

如觉的写的不错，欢迎评论讨论，本文为原创，如需转载请标明出处；

这篇关于基于webpack+Vue3+JavaScript+antd+less+axios技术栈实现所有组件全局自动化注册的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---