组件注册

以添加test组件为例

在组件目录 src/components 下添加 test 文件夹，建立 index.vue 文件

<template>
    <div>
    ...
    </div>
</template>

<script lang="ts" name="test" setup>
import {computed} from "vue"

// 组件
const props = defineProps({
	name: {
		type: String,
	},
});
...
</script>
<style scoped></style>

在组件配置文件 src/install/plugins/component.ts 中修改，进行组件注册，注册成功后可全局调用

组件注册也可采用其他方式，利用 unplugin-vue-components 插件自动注册，可自行开发

import type { App } from 'vue';
...
import test from '/@/components/test/index.vue';

export default (app: App) => {
    ...
    app.component('test', test);
}

组件调用示例

<test name="admin" />

系统支持组件，可在后台管理端 【模版】>【组件】中查看

引用vue模块

在一些业务中，可能还需要引入第三方的模块，以 vue-loader-plugin 为例

在终端中项目根目录执行命令

npm install vue-loader-plugin -save

全局注册组件， 在src/install/plugins下面新建一个文件loaderPlugin.ts

import type { App } from 'vue'
import VueLoaderPlugin from 'vue-loader-plugin';

export default (app: App) => {
    app.use(VueLoaderPlugin);
}