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>