vue 为什么要封装全局组件引入

更新时间：2022年07月04日 10:56:14 作者：哒哒哒528520

这篇文章主要介绍了vue为什么要封装全局组件引入，文章围绕主题展开详细的内容介绍，具有一定的参考价值，感兴趣的小伙伴可以参考一下

1.为什么要封装全局组件引入

为何要封装一个封装全局组件引入，因为我们平日定义多个全局组件的时候，在 main.js 里进行单个全局组件的时候太麻烦了，有10个全局组件要 import 10次，还要 Vue.use(组件) 10次，太麻烦了。我们现在手动封装一下。

现在 common 文件夹下面有3 个全局组件，global.js 是我们对全局引入的代码的封装。

2. 封装全局组件的 js

global.js 代码如下：

// 封装全局组件的引入
import Vue from 'vue';
// 将字符串首字母大写 返回当前字符串
function changeStr (str) {
  return str.charAt(0).toUpperCase() + str.slice(1);
}
/**
 * require.context 是 webpack 的API, 作用是可以动态引入文件
 * 第一个参数是指当前要引入文件的路径, 当前 global.js 与 child 这些组件平级，可以用 './'或者 '.'
 * 第二个参数是指是否匹配子级，这里没有子级，为 false
 * 第三个参数是指匹配 .vue 文件
 */
const requireComponent = require.context('./', false, /\.vue$/);
console.log(requireComponent, '所有的组件集合')
requireComponent.keys().forEach(fileName => {
  console.log(fileName, 'fileName')
  // 当前组件
  const config = requireComponent(fileName);
  console.log(config, '当前组件')
  const componentNmae = changeStr(
    // 这里是把 ./child1.vue 变成 child, 然后通过 changeStr 把 child 转化成 Child
    fileName.replace(/^\.\//, '').replace(/\.\w+$/, '')
  )
  console.log(componentNmae, '组件名')
  // 注册组件
  Vue.component(componentNmae, config.default || config);
});

3. 在 main.js 中

在 main.js 中引入这个封装好的 js, 注意：这里不需要通过 Vue.use(global)

import global from './components/common/global.js'

4. 我们要引入这些公共组件就可以直接用啦

这样就不用再引入了，很方便对不对，比心。

到此这篇关于vue 为什么要封装全局组件引入的文章就介绍到这了,更多相关vue 封装全局组件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

vue router嵌套路由在history模式下刷新无法渲染页面问题的解决方法
这篇文章主要介绍了vue router嵌套路由在history模式下刷新无法渲染页面问题的解决方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2018-01-01
ElementUI实现el-table列宽自适应的代码详解
这篇文章给大家介绍了ElementUI实现el-table列宽自适应的详细步骤,文中通过代码示例给大家介绍的非常详细,对大家的学习或工作有一定的帮助,需要的朋友可以参考下
2024-01-01
vue3+vite:src使用require动态导入图片报错的最新解决方法
这篇文章主要介绍了vue3+vite:src使用require动态导入图片报错和解决方法,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2023-04-04
Vue采用异步渲染的原理分析
对于Vue为何采用异步渲染，简单来说就是为了提升性能，因为不采用异步更新，在每次更新数据都会对当前组件进行重新渲染，为了性能考虑，Vue会在本轮数据更新后，再去异步更新视图，本文主要通过几个实例给大家介绍一下Vue为何采用异步渲染,需要的朋友可以参考下
2023-06-06
17个vue常用的数组方法总结与实例演示
这篇文章主要介绍了vue中常用的数组方法,包括：VUE数组转换字符串，VUE数组遍历，VUE数组过滤，VUE数组查询,VUE数组排序等功能，需要的朋友可以参考下
2022-12-12
vue项目实现图片上传功能
这篇文章主要为大家详细介绍了vue项目实现图片上传功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019-12-12
Vite创建项目的实现步骤
随着 Vite2 的发布并日趋稳定，现在越来越多的项目开始尝试使用它。本文我们就介绍了Vite创建项目的实现步骤，感兴趣的可以了解一下
2021-07-07
如何用vue3+Element plus实现一个完整登录功能
要实现用户的登录功能,可以使用Vue3和Element Plus,下面这篇文章主要给大家介绍了关于如何基于Vue3和Element Plus组件库实现一个完整的登录功能,文中提供了详细的代码示例,需要的朋友可以参考下
2023-10-10
关于vue3使用particles粒子特效的问题
这篇文章主要介绍了关于vue3使用particles粒子特效的问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-06-06
vue使用qrcode生成二维码的方法
这篇文章给大家介绍了vue使用qrcode生成二维码的方法,在Vue中实现二维码生成需要使用第三方库来处理生成二维码的逻辑,常用的库有qrcode和vue-qrcode,所以接下来小编将给大家介绍vue qrcode生成二维码的方法示例,需要的朋友可以参考下
2024-01-01