[JavaScript知识库]vue全局组件配置

新建文件 _globals.js和 components-global 文件夹

_globals.js配置如下:

import Vue from 'vue'
const requireComponent = require.context('./components-global', false, /_base-[\w-]+\.vue$/)
requireComponent.keys().forEach(fileName => {
  const componentConfig = requireComponent(fileName)
  const componentName = fileName
    .replace(/^\.\/_/, '')
    .replace(/\.\w+$/, '')
    .split('-')
    .map(kebab => kebab.charAt(0).toUpperCase() + kebab.slice(1))
    .join('')

  Vue.component(componentName, componentConfig.default || componentConfig)
})

main.js 入口引入

import '@/_globals.js'

在文件夹src\components-global下创建的组件都是全局的

举个例子, 如components-global下创建了_base-no-data.vue组件

// src\components-global\_base-no-data.vue
<template>
  <div class="no_data">暂无数据</div>
</template>

<script>
export default {
  name: 'NoData',
}
</script>

?那么在其他组件页面直接调用

// 其他组件内直接调用
<BaseNoData></BaseNoData>