vue動態組件& 動態import 組件

component 使用場景： 多個組件之間進行切換

  <component v-bind:is="currentComponent" ></component>

require.context() 使用場景：手動引入多個組件

/**
 *  動態生成組件模板
 *  @ components 目錄下命名規則 根據對應模塊分類，根據模塊module_name 創建
 *  modul_對應模塊  (10 問題模塊  20 檢查項餅圖  30 任務餅圖  40 地圖)
 */
const path = require('path')
const files = require.context('../components/', true,/page.vue$/)
const filesHead = require.context('../part/', true,/header-tab.vue$/)

const modules = {}
files.keys().forEach(key => {
  let pathArry = _.split(key,'/')
  let name = pathArry[2]+_.split(pathArry[1],'_')[1]
  modules[name] = files(key).default || files(key)
})

filesHead.keys().forEach(key => {
  let name =  _.camelCase(path.basename(key, '.vue'))
  modules[name] = filesHead(key).default || filesHead(key)
})
export var components = modules

<script>
import {components} from "../common/components"
export default{
components:components,
}
</script>