使用require.context工程化自动注册全局组件

 1.目录情况：

 

2.组件需要提供正确的name

 

3.工程化注册组件（上图的index.js）

import Vue from 'vue'
const ctx = require.context('./base', true, /[A-Za-z]\w+\.(vue)$/)
console.log(ctx.keys())
ctx.keys().forEach(path => {
  const module = ctx(path)
  /**
   * 兼容 import export 和 require module.export 两种规范
   */
  const component = module.default || module
  Vue.component(component.name, component)
})

 4.main.js  引用index.js

import '@/components/index.js'

5.然后可以用组件的name值直接引用组件

列如：

<basePagination></basePagination>