vue 统一注册公共组件

一、新建公共components.js 文件

/*
 *注册公共组件
 */

// 导航按钮
import NavBotton from '@/components/common/navBotton.vue';
...

export default Vue => {
    Vue.component('navBotton', NavBotton); //导航按钮
    ...
};

二、main.js   引入，use

import Components from '@/utils/components.js';

Vue.use(Components);

 

三、使用 XX.vue

<nav-button></nav-button>

 

 

 

更新方法：require.context 自动引入

import Vue from 'vue';
// import 所有组件
const requireComponent = require.context('@/components/common', true, /\.vue$/);
// 遍历所有组件地址地址
requireComponent.keys().forEach(fileName => {
    // 文件名作为组件名
    let name = fileName.split('/')[1].split('.')[0];
    const componetConfig = requireComponent(fileName);
    // 注册全局组件
    Vue.component(name, componetConfig.default || componetConfig)
})

 

main.js 引入

import '@/components/common/index.js';