vue-cli3 全局组件自动注册

11 min read

components目录下创建一个global目录,里面放置一些需要全局注册的组件。

index.js作用只要是引入main.vue,导出组件对象

components中创建一个index.js,用来扫描全局对象并自动注册。

// components/index.js
import Vue from 'vue'

// 自动加载 global 目录下的 .js 结尾的文件
const componentsContext = require.context('./global', true, /\.js$/)

componentsContext.keys().forEach(component => {
  const componentConfig = componentsContext(component)
  /**
  * 兼容 import export 和 require module.export 两种规范
  */
  const ctrl = componentConfig.default || componentConfig
  Vue.component(ctrl.name, ctrl)
})