vue2.0构建淘票票webapp

沈阳格力专卖店

项目描述
　　之前一直用vue1.x写项目，最近为了过渡到vue2.0，特易用vue2.0栈仿写了淘票票页面，而且加入了express作为后台服务。
　　前端技术栈：vue2.0 + vue-router + vuex + mint-ui
　　后台技术栈：nodejs + express
　　项目地址：https://github.com/canfoo/vue2.0-taopiaopiao
　　废话先不多说，先晒晒预览效果，过过瘾：

   

   

项目架构
　　本项目采用vue2.0栈构建前端页面，采用express搭建后台服务，主要目录如下：
　　build
config
src  //前端主要开发目录
　--assets  //存放前端静态资源
　--components  //存放组件
    --store  //vuex数据流管理
    --views  //页面视图，由vue-router引入
    --App.vue
    --main.js  //前端入口文件
server  //后台服务
   --bin  //启动后台服务配置
   --database  //存放页面所需要的json数据
   --public  //前端部署时存放在后台服务的位置
   --routes  //路由于请求接口管理
   --views  //前端模板存放位置
   --app.js  //后台服务入口
主要特色功能概览
　　1. 通过vue自定义指令实现正在热映等列表中图片按需加载，源码位置在/vue2.0-taopiaopiao/src/components/lazyload.js
　　2. 通过组件设计思想实现电影院详情中图片滑动变速、选中动画等功能，源码位置在/vue2.0-taopiaopiao/src/components/cinemaDetai/film.vue
　　3. 采用vuex管理每次加载数据自动判断是否需要显示loading，源码位置在/vue2.0-taopiaopiao/src/store/loading/mutations.js
　　4. 采用mint-ui实现城市分类选择等样式，其项目主页为http://mint-ui.github.io/#!/zh-cn
　　...
学习心得
　　vue2.0相对于vue1.0还是拥有比较大的变化，废除了很多原有的接口，比如1.0的为了解决组件通信的$dispatch和$broadcast弃用掉，转而提倡更多简明清晰的组件间通信和更好的状态管理方案，如vuex。事实证明，用vuex可以轻易解决组件间通信，而且容易维护和引用。还有2.0将v-el 和 v-ref 合并为一个 ref 属性，使用方法跟react里的refs是一样的。这里只是简单举两个例子，如果还停留在1.0的童鞋，可以直接到官方网站中查看。如果还不了解同时还在犹豫要不要入手vue的童鞋，这里强烈建议赶快拿起vue上来撸了，为什么呢，因为vue上手快，而且mvvm的数据双向绑定会让你省去很多无用的事，再配合第三方提供的方案，比如vue-router和vuex，可以将单薄的vue包装成一个强大的栈，对于移动端中、大项目快速开发与良好维护是一个非常不错的选择。
　　写此博客的目的主要是让大家简单了解下这个项目，而没有具体分析代码细节，因为个人觉得vue官网已经把很多知识点写得很详细了，没必要再复述了，如果对此项目有兴趣的童鞋，请到项目github地址阅读源码，如果有问题，可以在这里指出，让我们共同进步。
其他
　　react实现的淘票票入口：http://www.cnblogs.com/canfoo/p/6394761.html