feat: 全局组件自动注册

shuishen

2025-04-02 524c42f8c77bcd5d93484bcbee721b6cd9ebe296

feat: 全局组件自动注册

 src/components/global/publicTitle.vue

New file
@@ -0,0 +1,33 @@
<!--
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2024-10-25 18:41:39
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2025-04-02 18:26:00
 * @FilePath: \command-center-dashboard\src\components\publicTitle\publicTitle.vue
 * @Description: 
 * 
 * Copyright (c) 2024 by shuishen, All Rights Reserved. 
-->
<template>
    <div class="title-box">
        <div class="title">
            <slot name="titleName"></slot>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.title {
    margin-left: 30px;
    text-align: left;
    font-size: 18px;
    font-family: Alibaba PuHuiTi;
    font-weight: 700;
    font-style: italic;
    color: transparent;
    text-shadow: 0 2px 8px rgba(5, 28, 55, .42);
    background-image: linear-gradient(180deg, rgba(14, 197, 236, .36) 5%, rgba(49, 190, 255, .36) 20%, #fff 40%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparen;
}
</style>

 src/components/index.js

@@ -1,22 +1,16 @@
/*
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2024-10-25 15:20:05
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2024-11-08 20:11:39
 * @FilePath: \bigScreen\src\components\index.js
 * @Description: 
 * 
 * Copyright (c) 2024 by shuishen, All Rights Reserved. 
 */
/*
 **全局注册组件
 ** 放在components/global文件夹下
 */
import { defineAsyncComponent } from 'vue'
const components = import.meta.glob('./global/*.vue') // 异步方式
export default function install (app) {
  for (const [key, value] of Object.entries(components)) {
    const name = key.slice(key.lastIndexOf('/') + 1, key.lastIndexOf('.'))
    app.component(name, defineAsyncComponent(value))
  }
}

export default {
    install (app) {
        // 匹配当前目录下所有.vue文件（包括子目录）
        const components = import.meta.glob('./global/*.vue', { eager: true })


        for (const [path, module] of Object.entries(components)) {
            // 提取组件名（去除路径和扩展名）
            const name = path.split('/').pop()?.replace('.vue', '') || ''
            // 注册组件
            app.component(name, (module).default)
        }
    }
}

 src/main.js

@@ -1,83 +1,87 @@
import { createApp } from 'vue';
import website from './config/website';
import axios from './axios';
import router from './router/';
import store from './store';
import i18n from './lang/';
import { language, messages } from './lang/';
import * as ElementPlusIconsVue from '@element-plus/icons-vue';
import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css';
import Avue from '@smallwei/avue';
import '@smallwei/avue/lib/index.css';
import avueUeditor from 'avue-plugin-ueditor';
import crudCommon from '@/mixins/crud.js';
import { getScreen } from './utils/util';
import './permission';
import error from './error';
import App from './App.vue';
import 'animate.css';
import dayjs from 'dayjs';
import 'styles/common.scss';
import { createApp } from 'vue'
import website from './config/website'
import axios from './axios'
import router from './router/'
import store from './store'
import i18n from './lang/'
import { language, messages } from './lang/'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import Avue from '@smallwei/avue'
import '@smallwei/avue/lib/index.css'
import avueUeditor from 'avue-plugin-ueditor'
import crudCommon from '@/mixins/crud.js'
import { getScreen } from './utils/util'
import './permission'
import error from './error'
import App from './App.vue'
import 'animate.css'
import dayjs from 'dayjs'
import 'styles/common.scss'
// 系统组件
import debug from './debug';
import VueClipboard from 'vue3-clipboard';
import highlight from './components/highlight/main.vue';
import codeEditor from './components/code-editor/main.vue';
import basicBlock from './components/basic-block/main.vue';
import basicContainer from './components/basic-container/main.vue';
import SvgIcon from './components/SvgIcon.vue';
import thirdRegister from './components/third-register/main.vue';
import flowDesign from './components/flow-design/main.vue';
import flowDesignStep from './components/flow-design-step/main.vue';
import debug from './debug'
import VueClipboard from 'vue3-clipboard'
import highlight from './components/highlight/main.vue'
import codeEditor from './components/code-editor/main.vue'
import basicBlock from './components/basic-block/main.vue'
import basicContainer from './components/basic-container/main.vue'
import SvgIcon from './components/SvgIcon.vue'
import thirdRegister from './components/third-register/main.vue'
import flowDesign from './components/flow-design/main.vue'
import flowDesignStep from './components/flow-design-step/main.vue'
// 业务组件
// import codeSetting from './views/tool/codesetting.vue';
// import formSetting from './views/tool/formsetting.vue';
// import tenantPackage from './views/system/tenantpackage.vue';
// import tenantDatasource from './views/system/tenantdatasource.vue';
import { onResize, pxToRem } from '@/utils/rem';
// 全局组件
import globalComponents from '@/components'

import { onResize, pxToRem } from '@/utils/rem'
onResize()
import 'virtual:svg-icons-register'
window.$crudCommon = crudCommon;
debug();
window.axios = axios;
const app = createApp(App);
window.$crudCommon = crudCommon
debug()
window.axios = axios
const app = createApp(App)
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component);
    app.component(key, component)
}
app.component('basicContainer', basicContainer);
app.component('basicBlock', basicBlock);
app.component('highlight', highlight);
app.component('codeEditor', codeEditor);
app.component('thirdRegister', thirdRegister);
app.component('flowDesign', flowDesign);
app.component('flowDesignStep', flowDesignStep);
app.component('SvgIcon', SvgIcon);
app.component('basicContainer', basicContainer)
app.component('basicBlock', basicBlock)
app.component('highlight', highlight)
app.component('codeEditor', codeEditor)
app.component('thirdRegister', thirdRegister)
app.component('flowDesign', flowDesign)
app.component('flowDesignStep', flowDesignStep)
app.component('SvgIcon', SvgIcon)
// app.component('codeSetting', codeSetting);
// app.component('formSetting', formSetting);
// app.component('tenantPackage', tenantPackage);
// app.component('tenantDatasource', tenantDatasource);
app.config.globalProperties.$app = app;
app.config.globalProperties.$dayjs = dayjs;
app.config.globalProperties.website = website;
app.config.globalProperties.getScreen = getScreen;
app.config.globalProperties.pxToRem = pxToRem;
app.config.globalProperties.$app = app
app.config.globalProperties.$dayjs = dayjs
app.config.globalProperties.website = website
app.config.globalProperties.getScreen = getScreen
app.config.globalProperties.pxToRem = pxToRem

app.use(error);
app.use(i18n);
app.use(store);
app.use(router);
app.use(error)
app.use(i18n)
app.use(store)
app.use(router)
app.use(ElementPlus, {
  locale: messages[language],
});
    locale: messages[language],
})
app.use(Avue, {
  axios,
  calcHeight: 10,
  locale: messages[language],
});
app.use(avueUeditor, { axios });
    axios,
    calcHeight: 10,
    locale: messages[language],
})
app.use(avueUeditor, { axios })
app.use(VueClipboard, {
  autoSetContainer: true,
  appendToBody: true, // 这可以帮助解决一些更复杂的使用场景下的问题
});
app.mount('#app');
    autoSetContainer: true,
    appendToBody: true, // 这可以帮助解决一些更复杂的使用场景下的问题
})
app.use(globalComponents)
app.mount('#app')