需求背景

当一个组件在项目中多处被用到时，就需要将其设置成一个全局组件，省得每次使用都得写上对应的导入代码。

具体操作

1：批量注册组件

在src/components下新建一个index.ts 文件，写上如下代码：

import type {App, Component} from 'vue';
import Popover from '../lib/popover/popover.vue';
import Button from '../lib/Button.vue';
// { [propName: string]: Component }这个类型定义不可缺少，否则你使用全局标签时编辑器无法将其识别成组件，进而有些烦人的提示
const components: { [propName: string]: Component } = {
    ZPopover: Popover,
    ZButton: Button
};
export default {
    install: (Vue: App) => {
        for (const key in components) {
            Vue.component(key, components[key]);
        }

    }
};

2. 在main.ts中挂载

当你是通过install方法注册的组件时，在main.ts中就需要用use来使其生效

import globalComponents from './components/index';
const app = createApp(App);
app.use(globalComponents);

app.mount('#app');

3. 到任意组件中使用

😄经过上述两步就能成功实现的组件的全局使用.

<z-button> </z-button>
<z-popver> </z-popver>