当前位置: 首页 > news >正文

vue 引入公共组件之 require.context

require.context是webpack中,用来创建自己的(模块)上下文

webpack 会在打包构建代码中解析它

require.context接收三个参数:

  1. 要搜索的文件夹目录
  2. 是否搜索它的子目录
  3. 以及一个匹配文件的正则表达式
require.context('../views/components', true, /\.vue/)
复制代码

在我们项目中,有很多自定义的全局组件,使用这个将会非常方便,下面举例说明

我这里只写了两个,当我们有一百个的时候,如果手动全局引入。。。

这将是惨不忍睹的

所以,投机取巧的我们,利用了 require.context

import Vue from 'vue'
// 自定义组件
const requireComponents = require.context('../views/components', true, /\.vue/)
// 打印结果
// 遍历出每个组件的路径
requireComponents.keys().forEach(fileName => {
  // 组件实例
  const reqCom = requireComponents(fileName)
  // 截取路径作为组件名
  const reqComName = fileName.split('/')[1]
  // 组件挂载
  Vue.component(reqComName, reqCom.default || reqCom)
})

复制代码

一段话搞定一整个文件夹的组件,是否很方便

转载于:https://juejin.im/post/5cdb781fe51d453a51433088

相关文章:

  • 69前端技术
  • H5交互的页面跳转方式总结
  • 清理prometheus指定key的数据
  • JS之数据类型(Number()、parseInt()、toString()等转换)
  • 糟糕!线上系统频繁报错,MySQL严重死锁。。。
  • 刷题-2
  • HDU - 6287口算训练---二维数组vector+二分
  • 测试方法
  • 运行在YARN上的Spark程序的Executor,Cores和Memory的分配
  • 红帽Linux 8有什么不一样?
  • ConfigurableApplicationContext
  • 测试开发面试准备之HTTP协议-一次完整的Http请求过程
  • 云计算教程学习,linux操作系统内配置vlan+kvm虚拟机
  • TCP报文格式
  • 记一次nginx反向代理做转发遇到的坑
  • Android Studio:GIT提交项目到远程仓库
  • Docker入门(二) - Dockerfile
  • input实现文字超出省略号功能
  • JS 面试题总结
  • Laravel 菜鸟晋级之路
  • Mybatis初体验
  • PermissionScope Swift4 兼容问题
  • PV统计优化设计
  • Python socket服务器端、客户端传送信息
  • Python打包系统简单入门
  • Python利用正则抓取网页内容保存到本地
  • RxJS: 简单入门
  • SQLServer之创建显式事务
  • windows下mongoDB的环境配置
  • 搭建gitbook 和 访问权限认证
  • 分享自己折腾多时的一套 vue 组件 --we-vue
  • 微信小程序--------语音识别(前端自己也能玩)
  • 怎样选择前端框架
  • 国内唯一,阿里云入选全球区块链云服务报告,领先AWS、Google ...
  • !! 2.对十份论文和报告中的关于OpenCV和Android NDK开发的总结
  • !!Dom4j 学习笔记
  • #中的引用型是什么意识_Java中四种引用有什么区别以及应用场景
  • (AngularJS)Angular 控制器之间通信初探
  • (C#)一个最简单的链表类
  • (PHP)设置修改 Apache 文件根目录 (Document Root)(转帖)
  • (PWM呼吸灯)合泰开发板HT66F2390-----点灯大师
  • (pytorch进阶之路)CLIP模型 实现图像多模态检索任务
  • (动手学习深度学习)第13章 计算机视觉---图像增广与微调
  • (二)学习JVM —— 垃圾回收机制
  • (附源码)ssm基于web技术的医务志愿者管理系统 毕业设计 100910
  • (四) Graphivz 颜色选择
  • (淘宝无限适配)手机端rem布局详解(转载非原创)
  • (转)fock函数详解
  • (转)socket Aio demo
  • (轉貼) 資訊相關科系畢業的學生,未來會是什麼樣子?(Misc)
  • .equals()到底是什么意思?
  • .NET设计模式(7):创建型模式专题总结(Creational Pattern)
  • .Net中wcf服务生成及调用
  • .考试倒计时43天!来提分啦!
  • @Import注解详解