基于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技术栈的组件全局自动化注册。

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