【Vue3+Vite+TS】5.0 利用app.use实现全局组件注册

修改src\components\baseline\chooseIcon\index.ts

/*
 * @Author: bobokaka
 * @Date: 2021-12-22 21:58:24
 * @LastEditTime: 2021-12-22 23:58:54
 * @LastEditors: bobokaka
 * @Description: chooseIcon导出，用于全局注册
 * @FilePath: \vue3-element-ui-baseline\src\components\baseline\chooseIcon\src\index.ts
 */
import { App } from 'vue'
import ChooseIcon from './src/index.vue'

export { ChooseIcon }

//组件可通过use的形式使用
export default {
    ChooseIcon,
    install(app: App) {
        app.component('bs-choose-icon', ChooseIcon)
    },
}

修改src\components\baseline\chooseArea\src\index.vue

/*
 * @Author: bobokaka
 * @Date: 2021-12-21 19:47:32
 * @LastEditTime: 2021-12-22 21:55:49
 * @LastEditors: bobokaka
 * @Description: chooseArea导出，用于全局注册
 * @FilePath: \vue3-element-ui-baseline\src\components\baseline\chooseArea\index.ts
 */
import { App } from 'vue'
import ChooseArea from './src/index.vue'

export { ChooseArea }

//组件可通过use的形式使用
export default {
    ChooseArea,
    install(app: App) {
        app.component('bs-choose-area', ChooseArea)
    },
}

修改src\components\baseline\index.ts

/*
 * @Author: bobokaka
 * @Date: 2021-12-22 21:56:58
 * @LastEditTime: 2021-12-22 21:57:59
 * @LastEditors: bobokaka
 * @Description: Container导出，用于全局注册
 * @FilePath: \vue3-element-ui-baseline\src\components\baseline\container\index.ts
 */
import { App } from 'vue'
import Container from './src/index.vue'

export { Container }

//组件可通过use的形式使用
export default {
    Container,
    install(app: App) {
        app.component('bs-container', Container)
    },
}

修改

/*
 * @Author: bobokaka
 * @Date: 2021-12-20 01:41:54
 * @LastEditTime: 2021-12-22 22:02:44
 * @LastEditors: bobokaka
 * @Description: 全局基础组件全局注册
 * @FilePath: \vue3-element-ui-baseline\src\components\baseline\index.ts
 */
import { App } from 'vue'
import ChooseArea from './chooseArea'
import ChooseIcon from './chooseIcon'
import Container from './container'

const components = [ChooseArea, ChooseIcon, Container]
export { ChooseArea, ChooseIcon, Container }

//组件可通过use的形式使用
export default {
    ChooseArea,
    ChooseIcon,
    Container,
    install(app: App) {
        components.map(item => {
            app.use(item)
        })
    },
}

修改src\main.ts
增加

import BaselineUI from './components/baseline'
app..use(BaselineUI)

全部代码：

/*
 * @Author: bobokaka
 * @Date: 2021-12-19 10:57:16
 * @LastEditTime: 2021-12-22 22:33:24
 * @LastEditors: bobokaka
 * @Description: main.ts
 * @FilePath: \vue3-element-ui-baseline\src\main.ts
 */
import { createApp } from 'vue'
import App from './App.vue'
import router from './router/index'

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import * as Icons from '@element-plus/icons-vue'
import { toLine } from './utils'

import BaselineUI from './components/baseline'

import './style/index.scss'

const app = createApp(App)

//全局组件注册，牺牲一些性能，但方便使用
//封装成el-icon-xxx
for (let i in Icons) {
    // console.log(`i:`, i)
    // console.log('Icons[i]', (Icons as any)[i])
    app.component(`el-icon-${toLine(i)}`, (Icons as any)[i])
}

app.use(router).use(ElementPlus).use(BaselineUI)

app.mount('#app')

修改src\views\chooseIcon\index.vue

<!--
 * @Author: bobokaka
 * @Date: 2021-12-20 20:29:00
 * @LastEditTime: 2021-12-22 23:52:25
 * @LastEditors: bobokaka
 * @Description: 图标选择器
 * @FilePath: \vue3-element-ui-baseline\src\views\chooseIcon\index.vue
-->
<template>
    <div>
        <bs-choose-icon title="选择图标" v-model:visiable="visiable">
            选择图标
        </bs-choose-icon>
    </div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
const visiable = ref(false)
</script>
<style lang="scss" scoped></style>

修改src\views\chooseArea\index.vue

<!--
 * @Author: bobokaka
 * @Date: 2021-12-21 19:48:38
 * @LastEditTime: 2021-12-22 23:52:31
 * @LastEditors: bobokaka
 * @Description: 
 * @FilePath: \vue3-element-ui-baseline\src\views\chooseArea\index.vue
-->
<template>
    <div><bs-choose-area @change="changeArea" /></div>
</template>
<script lang="ts" setup>
const changeArea = (value: any) => {
  console.log(value.province, value.city, value.area)
}
</script>
<style lang="scss" scoped></style>

最终效果和修改之前一样。