Vue3 + Vite 批量注册公共组件

大家好,我是大帅子,今天给大家讲一下我们 Vue3 + TypeScript的批量注册公共组件,本文将写出两种方式,下面直接开始,都是先yi

---

1.下包

俗话说没有什么是一个包解决不了的,如果有的话,那就两个吧,哈哈,开个玩笑,下面,我们直接开始吧

unplugin-vue-components

1. 下包

yarn  add   unplugin-vue-components

npm i unplugin-vue-components -D

2. 使用

• 我们这边可以直接跟着文档走

vite.config.ts

import Components from 'unplugin-vue-components/vite'

export default defineConfig({
  plugins: [
    vue(),
    vueSetupExtend(),
    Components({
      dirs: ['src/components']
    })
  ]
  ...
})

3. 我们直接跑项目,会自动生成一个components.d.ts

2. 当然是我们自己写了 (笨方法)

1. 新建 components/index.js

import Skeleton from './Skeleton'
 import XtxCarousel from './library/xtx-carousel.vue'
 export default {
   install (Vue) {
     Vue.component(Skeleton.name, Skeleton)
     Vue.component(XtxCarousel.name, XtxCarousel)
   }
 }

2. main.js

import { createApp } from 'vue'
import componentPlugin from '@/components/index.js'
const app = createApp(App)
app.use(componentPlugin).use(store).use(router).mount('#app')

3. 一次性

1. 新建 components/index.js

const requireComponent = require.context('./', true, /.vue$/)
console.log(requireComponent.keys(), 3344222)

export default {
  install (Vue) {
    requireComponent.keys().forEach((item) => {
      // console.log(requireComponent[item], 77)  //  ['./bread.vue', './pubArt.vue', './qq/q.vue']
      /* 获取的是 每一个组件暴露出来的对象 */
      const defaultObj = requireComponent(item).default
      Vue.component(defaultObj.name, defaultObj)
    })
  }
}

2. main.js

import { createApp } from 'vue'
import componentPlugin from '@/components/index.js'
const app = createApp(App)
app.use(componentPlugin).use(store).use(router).mount('#app')

---

好了,这边已经给大家介绍到这里,以上是我自己的理解,希望可以帮到大家, 欢迎留言我这边一定会第一时间给大家解答,喜欢的可以点赞收藏
🐣---->🦅         还需努力!大家一起进步!!!