vue批量引入组件

方式一，在页面引入的方式 function camelCase(s) {     return s.replace(/-\w/g,function(x){         return x.slice(1).toUpperCase()     }) }
const allComponents = require.context(     '../components',     true,     /\.vue$/ )
let resComponents = {}
allComponents.keys().forEach(comName=>{     let name = camelCase(comName)     const comp = allComponents(comName)     resComponents[name.replace(/^\.\/(.*)\.\w+$/,"$1")] = comp.default })
export default resComponents   方式二：全局方式 const requireComponent = require.context(         // 其组件目录的相对路径         './components',         // 是否查询其子目录         true,         // 匹配基础组件文件名的正则表达式         /\.vue$/     )
    // console.log('实时',requireComponent);
    requireComponent.keys().forEach(fileName => {         // console.log('fie',fileName);         // 获取组件配置         const componentConfig = requireComponent(fileName)         // 全局注册组件         Vue.component(             componentConfig.default.name,   // 此处的name,是组件属性定义的name             // 如果这个组件选项是通过 `export default` 导出的，             // 那么就会优先使用 `.default`，             // 否则回退到使用模块的根。             componentConfig.default         )     })

标签：vue,const,name,批量,default,comName,requireComponent,组件
来源： https://www.cnblogs.com/fanqieyuanzi/p/16363712.html