vue ---- 全局组件统一管理

因为是自己瞎玩的所以组件个数很少，就是个意思昂～

先看一下我的文件夹

文件夹分类

实不相瞒文档里没说人话。。

require.context的参数

components文件夹中的index.js ⬇️

import Vue from "vue";
// 没什么规律单独引入的文件
import Swiper from "@/components/Swiper";
// 归纳成数组
let globalComponents = [
    Swiper
]
//  直接引入的组件们
globalComponents.map(component => {
    //  创建组件
    Vue.component(component.name, component);
})

const requireComponent = require.context('@/components/form', true, /\.vue/);
//  /components/form 中有命名规律的组件们
requireComponent.keys().forEach(fileName => {
    //  fileName 为文件路径的字符串
    //  组件实例
    const reqCom = requireComponent(fileName);
    //  创建组件
    //  这里写的是用组件的name来当标签名儿，也可以是别的方式，写个能抓住的字符串就成😊
    Vue.component(reqCom.default.name, reqCom.default);
})

export default globalComponents;

main.js文件中 ⬇️

import globalComponents from "@/components";
Vue.use(globalComponents);

tada~~_{这些组件就可以全局使用啦}