vue统一注册组件
文件夹下面组件数量较多,如果每一个组件先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统一注册组件的更多相关文章
- vue install 注册组件
1.myPlugin.js文件 let MyPlugin = {}; MyPlugin.install = function (Vue, options) { // 1. 添加全局方法或属性 Vue. ...
- Vue.js 注册组件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vue.js之组件(上篇)
本文的Demo和源代码已放到GitHub,如果您觉得本篇内容不错,请点个赞,或在GitHub上加个星星! https://github.com/zwl-jasmine95/Vue_test 以下所有知 ...
- Vue 入门之组件化开发
Vue 入门之组件化开发 组件其实就是一个拥有样式.动画.js 逻辑.HTML 结构的综合块.前端组件化确实让大的前端团队更高效的开发前端项目.而作为前端比较流行的框架之一,Vue 的组件和也做的非常 ...
- VueJs(8)---组件(注册组件)
组件(注册组件) 一.介绍 组件系统是Vue.js其中一个重要的概念,它提供了一种抽象,让我们可以使用独立可复用的小组件来构建大型应用,任意类型的应用界面都可以抽象为一个组件树 那么什么是组件呢? 组 ...
- vue.js之组件篇
Vue.js 组件 模块化:是从代码逻辑的角度进行划分的: 组件化:是从UI界面的角度进行划分的. 组件(Component)是 Vue.js 最强大的功能之一,组件可以扩展 HTML 元素,封装可重 ...
- 手把手教你实现一个 Vue 进度条组件!
最近在个人的项目中,想对页面之间跳转的过程进行优化,想到了很多文档或 npm 等都用到的页面跳转进度条,于是便想自己去实现一个,特此记录. 来看下 npm 搜索组件时候的效果: so 下面咱们一起动手 ...
- 详解Vue大护法——组件
1.什么是组件化 人面对复杂问题的处理方式: 任何一个人处理信息的逻辑能力都是有限的 所以,当面对一个非常复杂的问题时,我们不太可能一次性搞定一大堆的内容. 但是,我们人有一种天生的能力,就是将问题进 ...
- 为什么VUE注册组件命名时不能用大写的?
这段时间一直在弄vue,当然也遇到很多问题,这里就来跟大家分享一些注册自定义模板组件的心得 首先"VUE注册组件命名时不能用大写"其实这句话是不对的,但我们很多人开始都觉得是对的, ...
随机推荐
- 阶段5 3.微服务项目【学成在线】_day04 页面静态化_24-页面预览-页面预览测试
通过nginx转发到预览的地址 重启nginx 添加页面预览按钮 调整下列表的列的宽度
- Go 微服务架构Micro相关概念理解
Micro是一个微服务框架(或者说是工具集):提供了各类组件,解决微服务架构中的不同问题,服务监控.服务发现.熔断机制,负载均衡等等,自己一个个解决这些问题几乎不可能,这时候就需要借助go-micro ...
- 如何调试JS查看异常信息
如果页面上有错误,html页面的控制台会报错,可以查看报错信息,找到对应的行,找到出错的位置.也可以通过editplus运行调试,editplus会以弹框的形式出现提示,哪行的什么位置什么错误,需要记 ...
- 如何为ubuntu等Linux系统扩容(LVM)
第一步:磁盘分区 fdisk /dev/sdb root@ubuntu:/home/ubuntu# fdisk /dev/sdb Welcome to fdisk (util-linux 2.27.1 ...
- 常用CSS媒体查询
@media screen and (orientation: portrait) { /*竖屏 css*/} @media screen and (orientation: landscape) { ...
- 解决mosh: Nothing received from server on UDP port 60001 环境: centos7.1
主要问题在于有的教程使用iptables命令来开启对应端口, 但是centos7.1中虽然iptables仍然存在, 但是没有默认安装相关服务, 而是使用firewalld来管理防火墙. 所以我开始以 ...
- Java工程师学习指南第4部分:Java并发编程指南
本文整理了微信公众号[Java技术江湖]发表和转载过的Java并发编程相关优质文章,想看到更多Java技术文章,就赶紧关注本公众号吧吧. [纯干货]Java 并发进阶常见面试题总结 [Java基本功] ...
- 简单谈谈java中匿名内部类构造函数?
先看看下面的代码能不能编译通过: public static void main(String[] args) {List l1 = new ArrayList();List l2 = new Arr ...
- vscode使用Chrome浏览器调试不好用,解决方法!!
1.如果你是刚下载vscode,那么你需要下载两个插件. 1. open in browser(在浏览器中查看,支持五大主流浏览器),下载并启用. 2. view-in-browser (在浏览器中查 ...
- 《剑指offer》链表专题 (牛客10.23)
难度 题目 知识点 03. 返回链表的反序 vector 递归,C++ STL reverse() * 14. 链表中倒数第k个结点 指针操作 15. 反转链表 头插法,递归 16. 合并两个有序链表 ...