注册多个组件

/**
 * require.context
 * @param {directory}:表示检索的目录
 * @param {useSubdirectories}:表示是否检索子文件夹
 * @param {regExp}:匹配文件的正则表达式,一般是文件名
 * @param {mode}:加载模式,同步/异步
 */

import { App } from "vue";

const v = require.context(`@/components/common/vueComponents`, false, /\.vue$/);
const t = require.context(`@/components/common/tsComponents`, false, /\.ts$/);
const tsx = require.context(`@/components/common/tsxComponents`, false, /\.tsx$/);

function strUp(str: string) {
    return str.charAt(0).toUpperCase() + str.slice(1);
}

export default {
    install: (app: App<Element>): void => {
        v.keys().forEach(key => {
            const _component = v(key);
            const _componentName = strUp(key.replace(/(.*\/)*([^.]+).*/ig,'$2'));
            app.component(_componentName, _component.default || _component);
        })
        t.keys().forEach(key => {
            const _component = t(key);
            const _componentName = strUp(key.replace(/(.*\/)*([^.]+).*/ig,'$2'));
            app.component(_componentName, _component.default || _component);
        })
        tsx.keys().forEach(key => {
            const _component = tsx(key);
            const _componentName = strUp(key.replace(/(.*\/)*([^.]+).*/ig,'$2'));
            app.component(_componentName, _component.default || _component);
        })
    }
}
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

import ElementPlus from "./plugins/ElementPlus";
import common from "./plugins/common";

createApp(App).use(store).use(router).use(ElementPlus).use(common).mount('#app');

 

posted @ 2021-07-10 20:16  杨景贵  阅读(67)  评论(0)    收藏  举报