因为是自己瞎玩的所以组件个数很少，就是个意思昂～
先看一下我的文件夹
文件夹分类
还有一个小知识，require.context是webpack的一个API
https://webpack.docschina.org/guides/dependency-management/#requirecontext
实不相瞒文档里没说人话。。
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~~这些组件就可以全局使用啦
