浅谈vue 动态加载、注册组件

在大型项目中，vue组件是灵活复用的，需要从后台获取组件，加载注册渲染到页面，在项目遇到这个问题很久，没有得到解决，收集各方资料，整合一下

栗子：下面这个数组，我们是从后台获取到的数据，其中有component属性，这就是存在后台的组件名字，this.layout是一个随时变化的数组，开始并不知道 它有多少组件，没法实现提前注册，变需要使用动态加载注册；

this.layout=[                  {"x":0,"y":0,"w":6,"h":10,"id":"A0",component:"certificateSumLine"},                  {"x":0,"y":6,"w":6,"h":10,"i":"A1",component:"privateScoreTop"},                  {"x":0,"y":12,"w":6,"h":10,"i":"A2",component:"certificateCountColumn"}        ]

注册方案

this.registerComponent(this.layout[index].component);

这里是一个遍历，上面只是其中语句，通过下面这个方法，实现组件加载和注册。

 /**   * @desc 统一加载注册组件资源  */   registerComponent(templateName){ Vue.component(templateName,    require("./../dashComponent/"+templateName+".vue"));   },

解析
require(),目前不支持传带有path的变量，所以只能传输组件名字，这也是其中局限性，需要把所有需要加载的组件放在一个目录下面，
也许可以参考一下
http://webpack.github.io/docs/api-in-modules.html#require-context
修改配置，谁有更好的可以分享分享