全局注册

• 全局注册组件方便使用

创建组件

• 在 @component/global 目录下创建 IconFont.vue 文件。然后复制下面代码

<template>
	<span
		class="iconfont"
		:class="prefix + name"
		:style="{ color: color, fontSize: fontSize }"
	></span>
</template>

<script setup lang="ts">
defineProps({
	prefix: {
		type: String,
		default: 'icon-',
	},
	name: {
		type: String,
		default: '',
	},
	color: {
		type: String,
		default: '',
	},
	fontSize: {
		type: String,
		default: '16px',
	},
});
</script>

组合所有组件

1. 在@component/global 目录下创建 index.ts 文件。然后复制下面代码

// @component/global/index.ts
// 引入组件
import IconFont from './IconFont.vue';
// ... 引入n个组件
//全局组件对象，必须强定义类型{ [key: string]: any }，否则会提示报错
const allComponent: { [key: string]: any } = { IconFont };
export default {
	//必须使用install方法
	install(app: any) {
		//注册全局组件
		Object.keys(allComponent).forEach((key) => {
			app.component(key, allComponent[key]);
		});
	},
};

注册全局组件

• 在 main.ts 中加入

import globalComponent from '@/components/global';
//...
//use全局组件
app.use(globalComponent);