手动注册
src/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)
}
}
main.js
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')
webpack
const requireComponent = require.context('./library/', true, /\.vue$/)
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)
})
}
}
/* require.context(参数1,参数2,参数3) 是webpack提供的一个自动导入的API
参数1:加载的文件目录
参数2:是否加载子目录
参数3::正则,匹配文件
requireComponent:返回值:导入函数 fn
keys() 获取读取到的所有文件列表*/
vite
// 一个 *:匹配当前目录下的文件
// 两个 *:匹配当前目录及其嵌套的全部子目录下的文件
// const requireComponent = import.meta.globEager('./library/*.vue')
const requireComponent = import.meta.globEager('./library/**/*.vue')
export default {
install (Vue) {
Object.keys(requireComponent).forEach(item => {
const defaultObj = requireComponent[item].default
Vue.component(defaultObj.name, defaultObj)
})
}
}
main.js
import PluginCom from '@/components'
// 创建一个vue应用实例
createApp(App).use(PluginCom).use(store).use(router).mount('#app')