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

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

先看一下我的文件夹

文件夹分类 所有的组件都放在components中。创建index文件做。。。统筹😂
还有一个小知识，require.context是webpack的一个API
https://webpack.docschina.org/guides/dependency-management/#requirecontext

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

我理解的是，可以通过解析路径来还原实例😂当一个文件夹中的模块需要被频繁引用时，可以用require.context一次性搞定。三个参数分别为 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~~_{这些组件就可以全局使用啦}