配置全局组件

最近在做组件练习，以前配置全局组件都是放在了main.js中，看起来不是那么优雅，在src/utils文件夹下新建了一个setGlobalComponents.js

文件内容

import Vue from "vue";

const requireComponent = require.context('@/components/global', true, /.vue$/);
requireComponent.keys().forEach(fileName => {
    // 获取组件配置
    const componentConfig = requireComponent(fileName);
    // 剥去文件名开头的 `./` 和`.vue`结尾的扩展名
    const componentName = fileName.replace(/^.//, '').replace(/.vue$/, '');
    // 全局注册组件
    // const component = Vue.component(
    Vue.component(
        componentName.replace(///, '-'),
        componentConfig.default || componentConfig
    );
});

main.js中引用该文件

import './utils/setGlobalComponents.js'

在@/components/global文件夹中新建一个background.vue

<template>
  <div>
    <h1>I have the first global component :0</h1>
  </div>
</template>

在需要的地方使用

<template>
  <div class="about">
    <background />
    <h4>This is a page about testing private component. </h4>
    <login-form />
  </div>
</template>
<script>
import LoginForm from '../components/LoginForm'
export default {
  components:{
    LoginForm
  }
}
</script>

效果如图