由于项目是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是模板的变量，模板生成出来你填上你的组件名字就可以）
}
},// 在编译结束和 $el 第一次插入文档之后调用
ready : function() {
},// 在开始销毁实例时调用。此时实例仍然有功能。
beforeDestroy : function() {
},methods : {
},events : {
}
});
return $componentName$;
});
总体预览这个例子
为了演示完整的流程，我把这个例子做成一个小单页叫show-album，就两个页面： 1.主页叫main-page
2.详情页叫detail-page
详情页里的功能有：
接收父组件传过来的参数进行上传图片组件的初始化 点击每张图片右上角的叉叉可以删除图片 点击最后那个小相机图案调用微信”从手机相册中选图接口”，用户可以在自己手机上选图 选完图片后，图片按比例调整尺寸变成如图所示那样的缩略图 点击相应的图片调用微信“预览图片接口”进行图片预览 当图片等于最大图片数时，最后那个小相机图案消失 暴露出两个方法供别的组件调用①上传图片方法（上传到微信服务器并执行上传成功后的回调）uploadImage ②获取所有图片信息方法，包括初始化相册、删除过的、新增的图片信息getAllImgInfo
OK，介绍完毕，现在正式开始！
一.使用vue-router做路由，搭建show-album.js
整个功能叫show-album，所以这个功能的js我们就改名为show-album.js，这个js的结构是这样：<div class="jb51code">
<pre class="brush:js;">
define(["vue","vueResource","vueRouter","vAlbum"],VueResource,VueRouter,Album) {
// 安装资源模块
Vue.use(VueResource);
// 安装路由模块
Vue.use(VueRouter);
// jquery在执行post请求时，会设置Content-Type为application/x-www-form-urlencoded，
// 所以服务器能够正确解析，而使用原生ajax请求时，如果不显示的设置Content-Type，那么默认是text/plain，
// 这时服务器就不知道怎么解析数据了，所以才只能通过获取原始数据流的方式来进行解析请求数据。
// 由于vue是使用原生POST，所以要设置一下服务器才能正确解释POST过去的数据
Vue.http.options.emulateJSON = true;
//定义mainPage页面
var mainPage = Vue.extend({
template : "#main-page-temp"
})
//定义detailPage页面
var detailPage = Vue.extend({
template : "#detail-page-temp",components : {
'album' : Album
}
})
// 根组件
var showAlbum = Vue.extend({
components : {
'main-page' : mainPage,'detail-page' : detailPage
}
})
// 实例化路由
var router = new VueRouter();
// 配置路由
router.map({
'/main-page' : {
name : 'mainPage',component: mainPage
},//这里使用路由的动态片段
'/detail-page/:inspection_id/:image_type' : {
name : 'detailPage',component : detailPage
}
});
router.redirect({
// 重定向任意未匹配路径到 /home
'*': '/main-page'
});
// 启动应用
// 路由器会创建一个实例，并且挂载到选择符匹配的元素上。
router.start(showAlbum,'#show-album');
});
