使用场景

-在开发过程中,往往会有很多自己定义公用组件,我们通过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. (5)DataSet

    DataTable赋值给DataSet DataSet ds = new DataSet(); DataTable dt1 = new DataTable(); DataTable dt2 = new ...

  2. Codeforces 536C Tavas and Pashmaks(凸壳)

    题目链接 Tavas and Pashmaks 题目大意:n个人比赛,游泳和赛跑,游泳距离S,赛跑R.每个人对应两个速度(陆地和水上的),如果存在S,R,使得第i个人胜利,那么输出i 题目要求输出所有 ...

  3. [原创][FPGA]时钟分频之奇分频(5分频)

    0. 简介 有时在基本模块的设计中常常会使用到时钟分频,时钟的偶分频相对与奇分频比较简单,但是奇分频的理念想透彻后也是十分简单的,这里就把奇分频做一个记录. 1. 奇分频 其实现很简单,主要为使用两个 ...

  4. Arduino可穿戴教程保存源文件与打开已经存在的源文件

    Arduino可穿戴教程保存源文件与打开已经存在的源文件 Arduino IDE保存源文件 保存源文件可以通过“文件”菜单的“保存”或者快捷键Ctrl+S完成,如图2.28所示.   图2.28  保 ...

  5. Life of an Oracle I/O: tracing logical and physical I/O with systemtap

    https://db-blog.web.cern.ch/blog/luca-canali/2014-12-life-oracle-io-tracing-logical-and-physical-io- ...

  6. httplib 和 httplib2区别之 gzip解压

    HTTP请求头Accept-encoding: gzip信息告诉服务器,如果它有任何新数据要发送给时,请以压缩的格式发送.如果服务器支持压缩,它将返回由 gzip 压缩的数据并且使用Content-e ...

  7. IOS 教你玩转UITableViewController和TableView

    iphone和Ipad开发中UITableViewController和TableView应该是用得比較多得控件. 可是你是会由于写这些控件写得多了而厌烦. 全部怎么让这个控件一直能用.怎么让这个控件 ...

  8. [Algorithm] Write a Depth First Search Algorithm for Graphs in JavaScript

    Depth first search is a graph search algorithm that starts at one node and uses recursion to travel ...

  9. Android_自己定义切换控件SwitchView

    1.示意图 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvemltbzIwMTM=/font/5a6L5L2T/fontsize/400/fill/I0JB ...

  10. sql 表的部分字段查找 的结果集

    传统sql从多个对象中获得的list<Object> ,可以这样处理(利用Map)  List list = query.getList(sql);  //封装成BB类型  List< ...