Vue+ts项目利用app.use特性全局注册组件

Vue的组件开发，为我们提供了代码重用提供了便捷。在开发中，很多页面会共用一部分或者全部代码，重复使用已写的代码将会大大的提高开发效率。

在学习vue+ts封装组件库过程中，封装了多个组件，为了方便使用，在项目中需要使用全局注册。
分享一种全局注册的方法，本节以vite创建的vue+ts项目的 chooseArea（省市区三级联动组件） 为例。

创建目录

建议按照下图的样子创建目录，以便于管理文件

创建对应的文件

其中，lib目录用来放需要用到的假数据

src放置组件源码

index.ts放组件注册的入口，用来导出组件

编写index.ts导出组件

下面贴出代码

import { App } from 'vue'
import chooseArea from './src/index.vue'

export default {
    install: (app: App) => {
        app.component('gly-choose-area', chooseArea)
    }
}

app.use传入的对象中，需要调用一个 install 的方法，并且传入当前的 Vue 实例，此时调用app.component方法，将组件注册到当前的Vue实例中。
这样就将组件导出成功了，当你做到这里，就意味着你可以在页面中这样引用该组件了

<template>
    <gly-choose-area></gly-choose-area>
</template>
<script lang='ts' setup>
// @path 表示的是你存档组件文件的位置
import { chooseArea } from '@path'
</script>

导出所有的components

在components目录创建一个 index.ts 文件，里面这么写

import { App } from 'vue'
import chooseIcon from './chooseIcon'
import chooseArea from './chooseArea'

const components = [
    chooseIcon,
    chooseArea
];


export default {
    install: (app: App) => {
        components.map(component => {
            app.use(component);
        });
    }
}

主要的思路就是创建一个 components 数组，将导入的组件都放到这个数组里面

注意：在这个文件中，我们不需要导出组件，因为在 index.ts 中已经导出了，所以这里只需要导入即可。

然后在这个文件里面导出 app.use 所需要的对象，即对象里面写一个 install 方法，方法同上面的组件中的 index.ts 文件

然后使用 map 方法遍历数组，将每一个组件都注册到当前的Vue实例中

在main.ts中导入组件

这里主要是将 components 目录下的 index.ts 文件导入到main.ts中

然后 app 直接调用 use 方法，下面贴出关键代码

import glyUI from './components'
// ... you code here
app.use(glyUI)

到了这里，就算是完工了，在你的页面中使用组件的时候就可以直接使用标签，而不需要总是引用了。当然，这里也是可以按需引入，如果你愿意的话。

<template>
    <gly-choose-area></gly-choose-area>
</template>