需求
在
components
文件夹下有多个组件,需要一次性将多个组件导出使用
一般做法(一个一个导入再导出 - 繁琐)
import PenaltyTimeDistributionPattern from './PenaltyTimeDistributionPattern'
import LawPeakTime from './LawPeakTime'
import PunishIllegalBehavior from './PunishIllegalBehavior'
import CarIllegalRegular from './CarIllegalRegular'
import CaseRiskTrend from './CaseRiskTrend'
import MainLawRisk from './MainLawRisk'
import LawCaseIntegral from './LawCaseIntegral'
import ScenePunishTime from './ScenePunishTime'
import LawAndCasePoints from './LawAndCasePoints'
import SearchDialog from './SearchDialog'
export default {
PenaltyTimeDistributionPattern,
LawPeakTime,
PunishIllegalBehavior,
CarIllegalRegular,
CaseRiskTrend,
MainLawRisk,
LawCaseIntegral,
ScenePunishTime,
LawAndCasePoints,
SearchDialog
}
代码升级(统一导入并导出)
const components = require.context('./', true, /\.vue$/) // 导入 ./ 文件夹下所有以 .vue 结尾的文件
console.log('components ----', components)
console.log('components.keys() ----', components.keys())
const com = components.keys().reduce((com, comPath) => { // 处理文件名供导出
const comName = comPath.replace(/^\.\/(.*)\.\w+$/, '$1')
const value = components(comPath)
com[comName] = value.default
return com
}, {})
console.log('com----', com)
export default com
优点
- 避免一个一个文件导入,文件过多时导入繁琐问题