文件夹下面组件数量较多,如果每一个组件先import然后在 components,虽然灭有问题,但是会导致代码量大,而且不直观

解决办法:

将图元组件进行统一注册

新建一个pixels文件,文件里面的内容

import Vue from 'vue'

function importAll(r) {
r.keys().forEach((key) => {
// 组件实例
const reqCom = r(key)
// 截取路径作为组件名
const reqComName = key.replace(/^\..*\/(.*)\.\w+$/, '$1')
// 组件挂载
Vue.component(reqComName, reqCom.default || reqCom)
})
} // 在构建时,所有被 require 的组件都会被注册,匹配当前目录下Pixel目录下所有的vue文件
importAll(require.context('./', true, /Pixel\.vue$/))

这样

Pixel目录下所有的vue文件都会被统一注册

vue统一注册组件的更多相关文章

  1. vue install 注册组件

    1.myPlugin.js文件 let MyPlugin = {}; MyPlugin.install = function (Vue, options) { // 1. 添加全局方法或属性 Vue. ...

  2. Vue.js 注册组件

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. vue.js之组件(上篇)

    本文的Demo和源代码已放到GitHub,如果您觉得本篇内容不错,请点个赞,或在GitHub上加个星星! https://github.com/zwl-jasmine95/Vue_test 以下所有知 ...

  4. Vue 入门之组件化开发

    Vue 入门之组件化开发 组件其实就是一个拥有样式.动画.js 逻辑.HTML 结构的综合块.前端组件化确实让大的前端团队更高效的开发前端项目.而作为前端比较流行的框架之一,Vue 的组件和也做的非常 ...

  5. VueJs(8)---组件(注册组件)

    组件(注册组件) 一.介绍 组件系统是Vue.js其中一个重要的概念,它提供了一种抽象,让我们可以使用独立可复用的小组件来构建大型应用,任意类型的应用界面都可以抽象为一个组件树 那么什么是组件呢? 组 ...

  6. vue.js之组件篇

    Vue.js 组件 模块化:是从代码逻辑的角度进行划分的: 组件化:是从UI界面的角度进行划分的. 组件(Component)是 Vue.js 最强大的功能之一,组件可以扩展 HTML 元素,封装可重 ...

  7. 手把手教你实现一个 Vue 进度条组件!

    最近在个人的项目中,想对页面之间跳转的过程进行优化,想到了很多文档或 npm 等都用到的页面跳转进度条,于是便想自己去实现一个,特此记录. 来看下 npm 搜索组件时候的效果: so 下面咱们一起动手 ...

  8. 详解Vue大护法——组件

    1.什么是组件化 人面对复杂问题的处理方式: 任何一个人处理信息的逻辑能力都是有限的 所以,当面对一个非常复杂的问题时,我们不太可能一次性搞定一大堆的内容. 但是,我们人有一种天生的能力,就是将问题进 ...

  9. 为什么VUE注册组件命名时不能用大写的?

    这段时间一直在弄vue,当然也遇到很多问题,这里就来跟大家分享一些注册自定义模板组件的心得 首先"VUE注册组件命名时不能用大写"其实这句话是不对的,但我们很多人开始都觉得是对的, ...

随机推荐

  1. 免费版CloudFlare CDN基本设置参考

    CDN有很多,网上都有介绍,用户比较多的CloudFlare CDN大家都知道,配置起来也比较简单,合理的配置,才能提升网站的速度和网站安全.不同的网站需求配置不一样,以下是我的配置情况,仅供参考. ...

  2. leetcode 79. Word Search 、212. Word Search II

    https://www.cnblogs.com/grandyang/p/4332313.html 在一个矩阵中能不能找到string的一条路径 这个题使用的是dfs.但这个题与number of is ...

  3. Python - social-auth-app-django 模块 - 商城项目 第三方方式登录 - 微博

    开发准备 开通微博开发者权限 点击这里 进入 微博开放平台 开通后权限后创建应用 创建网页应用, 此处不需要进行审核即可使用测试环境 开发环境信息 此处一些信息是很重要的东西, 比如 App_key ...

  4. JAVA 基础编程练习题40 【程序 40 字符串排序】

    40 [程序 40 字符串排序] 题目:字符串排序. package cskaoyan; public class cskaoyan40 { @org.junit.Test public void a ...

  5. JAVA 基础编程练习题22 【程序 22 递归求阶乘】

    22 [程序 22 递归求阶乘] 题目:利用递归方法求 5!. 程序分析:递归公式:fn=fn_1*4! package cskaoyan; public class cskaoyan22 { @or ...

  6. jQuery.fn.extend与jQuery.extend的区别

    jquery 本身并不提供 jQuery.color() 这个方法,如果我们需要对jQuery本身提供的方法进行扩展,则我们就需要是用jQuery.fn.extend: jQuery.fn.exten ...

  7. 使用 tuned/tuned-adm工具动态调优系统CPU性能模式

    1)环境机器品牌:DELL  型号:R620配置:32核 * 1/256 GB*1/300 GB*4() + 1200 GB*2() 系统版本:CentOSLinux release 7.2.1511 ...

  8. Flutter的闪屏动画案例AnimationController

    打开一个APP,经常会看到精美的启动页,这种启动页也称为闪屏动画.它是从无到有有一个透明度的渐变动画的.图像展示完事后,才跳转到用户可操作的页面. AnimationController Animat ...

  9. python-Web-flask-蓝图和单元测试

    4 蓝图和单元测试: 能够使用代码实现蓝图对项目进行模块化 admin=Blueprint('admin',__name__) # 创建一个蓝图对象 @admin.route('/') def adm ...

  10. C语言的灵魂——指针基础

    一.什么是指针 1.指针的定义:地址形象化为指针,通过指针能够找到内存单元. 指针变量就是地址变量,变量的值为指针. 指针其实是我们将变量名和地址的关系显化(独立)出来的一种形式,是为了我们更加方便的 ...