Vue 批量註冊元件

目的：批量註冊元件，掛載一次終身使用

1. components/index.js 中批量註冊元件

• 元件必須有 name 屬性

export default {
    install(Vue) {
	// 1- 宣告元件
        // require.context('路徑', 是否深入查詢, 正則選出需要註冊的元件)
        const requireComponent = require.context('./', true, /\.vue$/)
        /*[
	    0: "./Breadcrumb/index.vue"
	    1: "./Hamburger/index.vue"
	    2: "./PageTools/index.vue"
        ]*/
        
        // 2- 遍歷註冊
        requireComponent.keys().forEach((item) => {
            //  獲取元件物件  requireComponent(item).default
            //  元件物件
            const moduleObj = requireComponent(item).default
            /*{
                "name": "Breadcrumb",
                "watch": {},
                "methods": {},
                "staticRenderFns": [],
                "_compiled": true,
                "_scopeId": "data-v-b50ef614",
                "beforeCreate": [
                    null
                ],
                "beforeDestroy": [
                    null
                ],
                "__file": "src/components/Breadcrumb/index.vue",
                "_Ctor": {}
            }*/
            Vue.component(moduleObj.name, moduleObj)
        }) 
    }
}
 

2. main.js 中使用元件

// 匯入元件
import plugins from '@/components/index'
// 使用元件
Vue.use(plugins)