利用app.use全局注册自定义组件

利用app.use全局注册自定义组件

在自己封装好的组件文件夹下创建index.ts

import { App } from 'vue'
// 导入自己的组件
import chooseArea from './chooseArea.vue'
// 让这个组件可以以use的形式使用
export default {
  install(app: App) {
    app.component('mk-choose-area', chooseArea)
  },
}

在组件总项目下创建index.ts导入上面的ts文件并使用

import { App } from 'vue'
// 省略index.ts
import Menu from './menu'
import chooseArea from './chooseArea'

const components = [Menu, chooseArea]
export default {
  install(app: App) {
      // 遍历use组件
    components.map((item) => {
      app.use(item)
    })
  },
}

之后就可以自己的项目中引入并使用组件了

// mian.ts
import { createApp } from 'vue'
import App from './App.vue'
// 引入组件总项目的index.ts
import MKBird from '@/myElementPlus/components'

app.use(MKBird)
app.mount('#app')

在项目任意地方使用