使用场景

-在开发过程中,往往会有很多自己定义公用组件,我们通过import 导入,components挂载到实例上就行,项目刚开始还好,但是随着项目迭代,组件越来越多,同一个组件不同的方式用需要重复导入挂载,就显得冗余
这里是通过require.context的一种便捷操作

实例

文件结构

component/modal里存放的是我们定义的公共DOM组件


// 导入Vue, 需要使用Vue.component()方法注册组件
import Vue from 'vue' // let f = r => {
// return r.keys().map(key => r(key));
// }
//
// console.log(f(require.context('./modal', true, /\.vue/))); // 将 ./modal 下的所有组件全部读取出来
//
//
// requireComponents: ƒ webpackContext(req) {
// return __webpack_require__(webpackContextResolve(req));
// } /**
* @var requireComponents -- requireComponents保存每个文件的相对路径的集合,可通过keys()返回
* @function requireComponents -- 也是个方法,传入keys()枚举出来的路径可返回组件实例
*/ const requireComponents = require.context('./', true, /\.vue/);
// 打印结果
// requireComponents: ƒ webpackContext(req) {
// return __webpack_require__(webpackContextResolve(req));
// }
// // 遍历出每个组件的路径
requireComponents.keys().forEach(fileName => {
// 组件实例
const reqCom = requireComponents(fileName)
// 截取路径作为组件名
const reqComName = fileName.split('/')[1]
// 组件挂载
Vue.component(reqComName, reqCom.default || reqCom)
})

具体的只要打印出来就一目了然,这里不做赘述

原文地址:https://segmentfault.com/a/1190000017159449

Vue一次性简洁明了引入所有公共组件的更多相关文章

  1. Vue(三十)公共组件

    以 分页 组件为例:(根据自己具体业务编写) 1.pagination.vue <template> <!-- 分页 --> <div class="table ...

  2. Vue(小案例_vue+axios仿手机app)_公共组件(路由组件传参)

    一.前言                    1.公共轮播图的实现                    2.组件传参,公共组件的实现 二.主要内容 1.公共轮播图的实现 (1)分析:当渲染不同的轮 ...

  3. 想在已创建的Vue工程里引入vux组件

    <1>. 在项目里安装vux npm install vux --save <2>. 安装vux-loader (这个vux文档似乎没介绍,当初没安装结果报了一堆错误) npm ...

  4. Vue在单独引入js文件中使用ElementUI的组件

    Vue在单独引入js文件中使用ElementUI的组件 问题场景: 我想在vue中的js文件中使用elementUI中的组件,因为我在main.js中引入了element包和它的css,并挂载到了全局 ...

  5. vue --- 关于多个router-view视图组件,渲染同一页面

    vue.js多视图的使用,可以提高网页组件化,模块化 比如使用多视图,可以将网站页面封装header.footer.navbar等多个公共部分, 遇到修改公共部分的文案信息等数据的时候,不再需要逐一修 ...

  6. 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 二十║Vue基础终篇:传值+组件+项目说明

    缘起 新的一天又开始啦,大家也应该看到我的标题了,是滴,Vue基础基本就到这里了,咱们回头看看这一路,如果你都看了,并且都会写了,那么现在你就可以自己写一个Demo了,如果再了解一点路由,ajax请求 ...

  7. react初探(二)之父子组件通信、封装公共组件

    一.前言 在组件方面react和Vue一样的,核心思想玩的就是组件,下面举两个组件常用的情景. 场景一:假如我们现在有一个页面包含表格以及多个弹框,这种时候如果将这个页面的业务代码写在一个组件中,那么 ...

  8. 公共组件及脚手架webpack模板

    一.公共组件的创建和使用 前面已经学习vue组件时,了解了公共组件,但在脚手架项目中只使用过局部组件.这里是讲解全局组件如何在脚手架项目中去使用. 1.创建全局组件 在src/components/C ...

  9. Vue.use自定义自己的全局组件

    通常我们在vue里面使用别人开发的组件,第一步就是install,第二步在main.js里面引入,第三步Vue.use这个组件.今天我简单的也来use一个自己的组件. 这里我用的webpack-sim ...

随机推荐

  1. SpringBoot 整合 RabbitMQ(包含三种消息确认机制以及消费端限流)

    目录 说明 生产端 消费端 说明 本文 SpringBoot 与 RabbitMQ 进行整合的时候,包含了三种消息的确认模式,如果查询详细的确认模式设置,请阅读:RabbitMQ的三种消息确认模式 同 ...

  2. JVM加载的初始化类

    首先Throws(抛出)几个自己学习过程中一直疑惑的问题: 1.什么是类加载?什么时候进行类加载? 2.什么是类初始化?什么时候进行类初始化? 3.什么时候会为变量分配内存? 4.什么时候会为变量赋默 ...

  3. Maven自动部署war到Tomcat8

    原文:http://www.cnblogs.com/yucongblog/p/5392932.html 我使用的环境是:Eclipse Java EE IDE for Web Developers(V ...

  4. nginx学习(二)——基础概念之异步非阻塞

    上面讲了很多关于nginx的进程模型,接下来,我们来看看nginx是如何处理事件的. 有人可能要问了,nginx采用多worker的方式来处理请求,每个worker里面只有一个主线程,那能够处理的并发 ...

  5. ubuntu怎样打开命令行终端(5种方法)

    内容中包含 base64string 图片造成字符过多,拒绝显示

  6. 百科知识 kux文件如何打开

    即使是官方自带的浏览器也无法打开   你可以直接复制文件名   然后在百度里搜即可   你自己下载的东西还是能转码的      

  7. 【每日Scrum】第五天(4.15) TD学生助手Sprint1站立会议

    TD学生助手Sprint1站立会议(4.15) 任务看板 站立会议内容 组员 昨天 今天 困难 签到 刘铸辉 (组长) 今天和静姐,娇哥把图片3D画廊效果的功能实现了,GPS功能没什么进展,所以只能继 ...

  8. PC常用电源IC、MOS、三极管、二极管厂家

    笔记本常用MOS.三极管.二极管厂家: 1.EMC 杰力电子(台湾)官方网站:http://www.excelliancemos.com/tw/solution.php 2.UBIQ(台湾电源厂家UP ...

  9. C# trim split dataGrid

    C#中Trim().TrimStart().TrimEnd()的用法:     这三个方法用于删除字符串头尾出现的某些字符.Trim()删除字符串头部及尾部出现的空格,删除的过程为从外到内,直到碰到一 ...

  10. hdparm - get/set SATA/IDE device parameters

    hdparm(8) - Linux man page Name hdparm - get/set SATA/IDE device parameters Synopsis hdparm [ flags ...