vue3 项目中使用自己封装好的组件，全局使用不需要引入。

[tiantingrui]

利用 app.use 特性 全局注册组件

需要了解的前置知识

1. app.component 注册组件
2. 如何编写一个插件
3. app.use

具体步骤

1. 注册每个组件，并未每个组件编写为一个单独的插件

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

// 编写插件 export default { install(app: App) { // 注册组件 app.component('choose-area', chooseArea) } }

2. 将写好的每个插件都统一放在最外层的 index.ts 中去逐个安装
```ts
import { App } from "vue";
import chooseArea from "./chooseArea/index";
import chooseIcon from "./chooseIcon/index";

const components = [chooseArea, chooseIcon];

export default {
  install(app: App) {
    components.map((item) => {
      // 安装插件
      app.use(item)
    })
  }
}

3. 在 main.ts 中全局使用注册好的组件

import ice from "./components/index";

app.use(router).use(ElementPlus).use(ice);

4. 在组件中使用定义好的组件，无需引入，就像 element-plus 一样