因為是自己瞎玩的所以組件個數(shù)很少霜幼，就是個意思昂～
先看一下我的文件夾
文件夾分類
還有一個小知識，require.context是webpack的一個API
https://webpack.docschina.org/guides/dependency-management/#requirecontext
實不相瞞文檔里沒說人話浓恳。刹缝。
require.context的參數(shù)
components文件夾中的index.js ??
import Vue from "vue";
// 沒什么規(guī)律單獨引入的文件
import Swiper from "@/components/Swiper";
// 歸納成數(shù)組
let globalComponents = [
Swiper
]
// 直接引入的組件們
globalComponents.map(component => {
// 創(chuàng)建組件
Vue.component(component.name, component);
})
const requireComponent = require.context('@/components/form', true, /\.vue/);
// /components/form 中有命名規(guī)律的組件們
requireComponent.keys().forEach(fileName => {
// fileName 為文件路徑的字符串
// 組件實例
const reqCom = requireComponent(fileName);
// 創(chuàng)建組件
// 這里寫的是用組件的name來當(dāng)標(biāo)簽名兒，也可以是別的方式晴圾，寫個能抓住的字符串就成??
Vue.component(reqCom.default.name, reqCom.default);
})
export default globalComponents;
main.js文件中 ??
import globalComponents from "@/components";
Vue.use(globalComponents);
tada~~這些組件就可以全局使用啦
