之前一直用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实现的淘票票仓库地址:https://github.com/canfoo/react-taopiaopiao
react-native实现的淘票票仓库地址:https://github.com/canfoo/react-native-taopiaopiao
深蓝互联成立于2013年,是一家物联网硬件开发及软件应用服务商,获得多次获得国家高新技术企业资质的企业。深蓝互联专注软硬件技术开发的专业性技术公司。我们从事软硬件开发十年,擅长SaaS 平台开发、APP小程序开发、软硬件结合开发,在视觉识别处理、数据架构、云计算、多线程高并发和集群、数据安全加密和防护方便有很深的技术积累。
我们拥有专业优秀的设计和技术团队,以极具创意的 UI 设计、精湛卓越的开发技术,专业的网络策划团队。公司多年来投入打造物联网SaaS平台,集成了公司研发的多款智能物联网终端(智能鲜米机、生鲜售货机、自助洗车机、小区电瓶车充电系统等)。
公司一直坚持以研发为导向,打造软硬件结合的物联网平台系统。将一直坚持提高开发的技术实力更好的为我们的客户服务!
文章来自深蓝互联http://www.szdbi.com/webxt/335.html转载请注明出处!
上一篇:VS2015(Xamarin)开发安卓WebApp笔记
下一篇:小程序开发之弹出框