vue如何实现整体注册组件局部/局部注册组件

All rivers run in to the sea

已于 2022-06-25 20:20:53 修改

阅读量910

点赞数 2

分类专栏： vue 小程序 webpack 文章标签： vue.js javascript webpack

于 2022-06-25 20:14:21 首次发布

本文链接：https://blog.csdn.net/qq_43944285/article/details/125463113

版权

在前端开发中，组件化是提升代码复用和维护性的重要手段。本文详细介绍了Vue中如何进行整体注册组件（通过webpack批量导入）和局部注册组件的方法，包括在main.js中使用Vue.use()和在组件内部导入并注册。整体注册可以快速导入大量组件，而局部注册则适用于按需加载，两者结合能有效优化项目性能。

摘要由CSDN通过智能技术生成

在前端开发中,经常需要将业务进行组件化,我们就需要去注册组件

1.vue如何实现整体注册组件 (快速导入)

**搭配webpack来批量注册组件 **

 + require.context(参数1,参数2,参数3) 是webpack提供的一个自动导入的API
参数1:加载的文件目录
参数2:是否加载子目录
参数3:：正则，匹配文件
requireComponent:返回值：导入函数 fn
keys() 获取读取到的所有文件列表

新建src/components/index.js

import Vue from "vue";
//  使用的是webpack require.context(路径【表示公共的组件的目录】,文件深入循环查找【bool】,正则【最终要使用的组件】 需要注意的是每一个组件的name都必须有 否则就会出现组件注册不了的情况 )
const requireComponent = require.context("./", true, /\.vue$/);
console.log(requireComponent.keys(), 3344222);
requireComponent.keys().forEach((item) => {
   
  // console.log(requireComponent(item), 77)  //  ['./bread.vue', './pubArt.vue', './qq/q.vue']
  /* 获取的是 每一个组件暴露出来的对象 */
  const defaultObj = requireComponent(item).default;
  Vue.<