Vue一次性简洁明了引入所有公共组件的方法

使用场景

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

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue 引入公共css文件的简单方法(推荐)

    如果不想把css写在单文件组件里如这样: <template> <div id="app"> <div class='nav-box'> <ul class='nav'> <li> <a href="#/" rel="external nofollow" rel="external nofollow" >home</a> </li>

  • Vue一次性简洁明了引入所有公共组件的方法

    使用场景 -在开发过程中,往往会有很多自己定义公用组件,我们通过import 导入,components挂载到实例上就行,项目刚开始还好,但是随着项目迭代,组件越来越多,同一个组件不同的方式用需要重复导入挂载,就显得冗余 这里是通过require.context的一种便捷操作 实例 文件结构 component/modal里存放的是我们定义的公共DOM组件 // 导入Vue, 需要使用Vue.component()方法注册组件 import Vue from 'vue' // let f = r

  • vue项目中引入noVNC远程桌面的方法

    1 .首先,先简单介绍一下概念. VNCServer 是一个为了满足分布式用户共享服务器资源,而在服务器开启的一项服务,对应的客户端软件有图形化客户端 VNCViewer,而 noVNC 则是 HTML5 VNC 客户端,它采用 HTML 5 WebSocket, Canvas 和 JavaScript 实现. noVNC 被普遍用在各大云计算.虚拟机控制面板中.noVNC 采用 WebSockets 实现,但是当前大多 VNC 服务器不支持 WebSocket,所以 noVNC 不能直连 VN

  • vue+高德地图写地图选址组件的方法

    vue+高德地图写地图选址组件的方法

    前言 现在做这个移动端的项目中有一个地图选址的功能,本来高德地图中有一个现成的选址组件,但是有两个问题,因为他是用iframe引用的,第一改不了样式,这点还勉强能接受:第二他的左上角有一个返回键,在搜索的时候可以返回到地图界面,但是在地图界面时点返回没有用,试了半天也没搞明白怎么监听到那个返回键的点击事件,所以趁这两天项目基本结束自己写一个把这个功能优化一下,也方便以后使用. 开整 vue的安装使用啥的我在这就不说了,直接开始地图选址组件. 首先上高德开放平台弄一个key,然后在index.ht

  • Vue实现可复用轮播组件的方法

    本文用vue简单的实现了一个轮播图的基础功能,并抽离出来作为一个公共组件,方便复用 html和js部分 <template>   <div     class="img-box"     ref="img-box"     :style="{width: styles.width, height: styles.height}"   >     <div v-for="(item, index) in im

  • vue 项目如何引入微信sdk接口的方法

    vue 项目如何引入微信sdk接口的方法

    做微信的网页基本上都要接入微信的sdk,我在做的时候,也颇费了一番功夫,然后就想记录一下,供自己日后翻阅,以及让有需要的朋友可以做一下参考,如果喜欢的可以点波赞,或者关注一下,希望可以帮到大家. 安装sdk npm install weixin-js-sdk --save 开始之前大家可以先读一读微信公众号的 接入文档,vue是单页面项目,比如你想要接入微信分享功能,分享功能在每个路由地址都要有,因为每个路由的url是不一样的,搜易就需要在每个路由地址都引入一遍. 整体步骤: vue引入sdk的

  • 解决vue项目中某一页面不想引用公共组件app.vue的问题

    Vue 单页面应用 把公共组件放在 app.vue 但是我希望某个页面没有这些公共组件怎么办(比如登陆页面)每个页面都有 导航栏 但是我希望 登陆页面只有一个背景色和一个登陆框 没有导航栏 那应该怎样设置呢? vue中文文档:点击进入 在根组件中:在导航栏使用v-show判断当前路由是否是不需要的组件来完成页面: <template> <div id="app"> <home-header v-show="!(path ==='/') "

  • Vue使用zTree插件封装树组件操作示例

    Vue使用zTree插件封装树组件操作示例

    本文实例讲述了Vue使用zTree插件封装树组件操作.分享给大家供大家参考,具体如下: 1.通过npm安装jquery npm install jquery --save-dev 2.在build/webpack.base.conf文件当中引入jquery module.exports = { ... resolve: { extensions: ['.js', '.vue', '.json'], alias: { 'vue$': 'vue/dist/vue.esm.js', '@': reso

  • .html页面引入vue并使用公共组件方式

    目录 .html页面引入vue并使用公共组件 问题描述 解决办法 目录结构 vue公共组件框架搭建 步骤详述 总结 .html页面引入vue并使用公共组件 问题描述 整体项目采用传统 .html 文件搭建,vue仅作为渲染数据工具使用,需要使用的地方使用 <script> 标签引入. 现有数个页面,每个页面都包含相同 header 和 footer ,希望可以把 header 和 footer 提取出来,避免太多重复代码. 解决办法 公共部分写在 .js 文件里,本质就是在当前页面中写的公共组

  • vue开发公共组件之返回顶部

    本文实例为大家分享了vue开发公共组件之返回顶部的具体代码,供大家参考,具体内容如下 记录一下开发公共组件的流程. 背景:pc端使用element-ui框架,本身是有返回顶部的组件的.现在需要在移动端使用.照着葫芦画瓢弄一个.记录如何将公共组件通过install的方式,注册为全局的组件使用. components目录下,新建bacttop文件夹,内部包含一个index.js文件和一个src文件夹.src文件夹内放backtop.vue组件文件. |--components   |--index.

  • vue elementui 实现搜索栏公共组件封装的实例代码

    vue elementui 实现搜索栏公共组件封装的实例代码

    1.背景 vue后台管理系统,会有很多表格页面,表格上方会有一些搜索选项,表格直接使用el-table即可,而搜索栏区域每次写起来都很繁琐,而且多人开发情况下每个人写的样式都不相同,布局样式无法统一. 所以要考虑对搜索栏做一个封装,统一配置引用,提升开发维护效率和界面统一. 完成后的效果大概就是长这样: 2.分析 项目使用的是elementui框架,搜索栏这种表单提交,首先要使用el-form组件来封装,而复杂点就是表单项可能有很多种,例如input输入框.select选择框.日期时间选择框.日

随机推荐