vue+webpack注册全局组件 -- require.context()

components目录
global //全局组件目录
install.js // 注册全局组件
dialog.vue // 全局组件内容
install.js //

// 一次引入终身受用
/**
 * require.context()参数的意义
 * 参数1.文件目录
 * 参数2.是否查找子集
 * 参数3.查找规则
 */
const requireComponent = require.context('./', true, /\.vue$/)
const install = (Vue) => {
  // 如果组件被注册就返回,没有就注册
  if (install.installed) return
  install.installed = true
  requireComponent.keys().forEach(filename => {
    // filename 文件
    // 第i个组件
    const config = requireComponent(filename)
    // 组件名
    const componentName = config.default.name
    // 循环注册组件
    Vue.component(componentName, config.default || config)
  })
}

export default {
  install
}

dialog.vue文件

<div class="comdialog">
  <el-dialog>
    <div>
      <!-- 父组件中自定义标签 -->
      <slot></slot>
    </div>
  </el-dialog>
</div>
<script>
  export default {
    name: 'comDialog',  //name为组件名称
    props: {
      dialogList: Object
    },
    data() {
      return {
        dataList: this.dialogList
      }
    },
  }
</script>

main.js

 import template from './components/global/install.js'  //全局组件
 Vue.use(template)

页面中使用

<com-dialog></com-dialog>