批量注册全局组件

最新推荐文章于 2024-03-08 10:30:23 发布

红绿蓝yy

最新推荐文章于 2024-03-08 10:30:23 发布

阅读量219

点赞数

文章标签： vue.js 前端

本文链接：https://blog.csdn.net/weixin_50275946/article/details/124774089

版权

Vue3 组件注册动态导入 require.context 批量安装

关键词由CSDN通过智能技术生成

批量注册自定义组件 vue3

src/components/index.js

// import XtxSkeleton from './xtx-skeleton'
// import XtxCarousel from './xtx-carousel'
// import XtxMore from './xtx-more.vue'
// export default {
//   install (app) {
//     // 全局注册组件
//     app.component(XtxSkeleton.name, XtxSkeleton)
//     app.component(XtxCarousel.name, XtxCarousel)
//     app.component(XtxMore.name, XtxMore)
//   }
// }
export default {
  install (app) {
    // 1.加载"./"下所有.vue文件
    // 参数一：文件路径
    // 参数二：是否作用到子文件夹
    // 参数三：正则 - 文件名
    const ctx = require.context('./', false, /\.vue$/)
    // console.log(ctx, 'ctx')
    // console.dir(ctx.keys()) // 路径
    ctx.keys().forEach((item) => {
      // ctx(item) // 导入这个组件  组件
      const component = ctx(item).default
      app.component(component.name, component)
    })
  }
}

// 注：组件需要name属性

在main.js中引入

import XtxUI from '@/components'
createApp(App)
  .use(store)
  .use(router)
  .use(XtxUI) // 批量注册自定义组件
  // .component(XtxSkeleton.name, XtxSkeleton)
  .mount('#app')