【vue全局注册组件--小趴菜教程】

1. 先看张照片
   
   2.再复制下面这段代码就ok啦
   其实就是看vue官网的基础组件的自动化全局注册

3.lodash安装看官网
链接: lodash官网

import Vue from 'vue'
import upperFirst from 'lodash/upperFirst'
import camelCase from 'lodash/camelCase'
//这里的三个参数分别是 1.其组件目录的相对路径
// 2.是否查询子目录,也就是下下一级目录
// 3.匹配组件的正则表达式
const requireComponent = require.context('./', false, /\.vue$/)

requireComponent.keys().forEach(fileName => {
// 获取组件配置
  const componentConfig  = requireComponent(fileName) 
// 获取组件的PascalCase命名
const componentName = upperFirst(camelCase(fileName.split('/').pop().replace(/\.\w+$/,'')))
  // 最后使用内置的组件名称 进行全局组件注册(这里需要注意因为是通过组件name注册的,所以每个组件都必须有name属性)
  Vue.component(componentName, componentConfig.default ||componentConfig)
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16