[TOC] ### 1. 在components中新建index.js文件 ~~~ import Vue from 'vue' // 檢索目錄下的模塊 const req = require.context('.', true, /\.vue$/) req.keys().forEach(fileName => { // require模塊 const componentConfig = req(fileName) const name = fileName.name || fileName .replace(/^\.\/.*\//, '') .replace(/\.vue$/, '') .toLowerCase() Vue.component(name, componentConfig.default || componentConfig) }) ~~~ ### 2. 在register/index.js中全局引用 ~~~ // 統一注冊全局配置和組件 import Vue from 'vue' // 引入餅狀圖 import 'echarts/lib/chart/pie' // 引入柱狀圖 import 'echarts/lib/chart/bar' // 引入折線圖 import 'echarts/lib/chart/line' // 引入提示框 import 'echarts/lib/component/tooltip' // 注冊全局組件 import '@/components' // 注冊餓了么ui import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' // 全局css import '@/styles/index.scss' // 引入iconfont import '@/icons/iconfont/iconfont.css' // 加載全部svg import '@/icons/svg' Vue.use(ElementUI) // 開發環境導入mockjs // if (process.env.NODE_ENV === 'development') { // /* eslint-disable */ // require('@/mock') // } ~~~ ### 3. 在main.js中引入 ~~~ import Vue from 'vue' import App from '@/App.vue' import router from '@/router' import store from '@/store' import '@/register' import initAppConfig from './initAppConfig' Vue.config.productionTip = false async function init() { await initAppConfig() // 等待app配置初始化完成 // 掛在vue new Vue({ router, store, render: h => h(App) }).$mount('#app') } init() ~~~