使用require.js+vue开发微信上传图片组件方法

使用require.js+vue开发微信上传图片组件方法
这篇文章主要为大家详细介绍了require.js+vue+vue-router+vue-resource开发微信上传图片组件,具有一定的参考价值，感兴趣的小伙伴们可以参考一下

这篇文章主要为大家详细介绍了require.js+vue+vue-router+vue-resource开发微信上传图片组件,具有一定的参考价值，感兴趣的小伙伴们可以参考一下

由于项目是thinkPHP做后端框架，一直以来都是多页面的后端路由，想使用火热的webpack有点无从下手（原谅我太菜，而且推广vue只有我一个人……），没办法，想把vue用起来，唯有在原来的基础上改进。使用webpack的巨大好处就是可以使用 .vue 这样的单文件来写vue组件，这样每一个组件就是一个 .vue 文件，哪里用上这个组件就引入进来，维护起来确实很爽。然而一直以来项目用的都是require.js，那又想以这样的形式来组织vue组件，还要加上vue-router和vue-resource，怎么破？这篇文章以开发微信上传图片组件为例子小结一下require.js+vue+vue-router+vue-resource的开发流程。

用require.js组织你的组件我们会有一个components目录去放我们的各个组件，每个组件有用自己名字命名的文件夹，比如这次的例子album组件，里面就放着这个组件的html、js、css，具体怎样用require.js去加载html和css，大家百度一下把相关插件下载下来即可。于是该组件的js中就可以在define里把相关的依赖都加载进去，最后把组件return出去，别的组件也可以通过define加载这个组件，这也达到了模块化管理组件的目的了。

这里的话，我总结了一个使用require.js写vue组件的模板，使用WebStorm把这个模板加上去，每次写组件的时候打几个字就把模板生成出来，不要太爽啊！（componentName是模板的变量，模板生成出来你填上你的组件名字就可以）

define(["vue","text!../js/lib/components/$componentName$/index.html","css!../js/lib/components/$componentName$/index.css"],function (Vue,Template) { // 这里是模块的代码 var $componentName$ = Vue.extend({ template : Template, props : [], data : function() { return { } }, // 在编译结束和 $el 第一次插入文档之后调用 ready : function() { }, // 在开始销毁实例时调用。此时实例仍然有功能。 beforeDestroy : function() { }, methods : { }, events : { } }); return $componentName$;});