项目描述

之前一直用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地址阅读源码,如果有问题,可以在这里指出,让我们共同进步。

vue2.0构建淘票票webapp的更多相关文章

  1. Vuex2.0+Vue2.0构建备忘录应用实践

    一.介绍Vuex Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化,适合于构建中大型单页应用. ...

  2. 适用初学者:vue2.0构建单页应用最佳实战

    参考:https://segmentfault.com/a/1190000007630677 自己gitHub项目地址:https://github.com/shixiaoyanyan/vue-wor ...

  3. react构建淘票票webapp,及react与vue的简单比较。

    前言 前段时间使用vue2.0构建了淘票票页面,并写了一篇相关文章vue2.0构建淘票票webapp,得到了很多童鞋的支持,因此这些天又使用react重构了下这个项目,目的无他,只为了学习和共同进步! ...

  4. react+redux构建淘票票首页

    react+redux构建淘票票首页 描述 在之前的项目中都是单纯的用react,并没有结合redux.对于中小项目仅仅使用react是可以的:但当项目变得更加复杂,仅仅使用react是远远不够的,我 ...

  5. 基于Vue2.0+Vue-router构建一个简单的单页应用

    爱编程爱分享,原创文章,转载请注明出处,谢谢!http://www.cnblogs.com/fozero/p/6185492.html 一.介绍 vue.js 是 目前 最火的前端框架,vue.js ...

  6. vue2.0+elementUI构建单页面后台管理平台

    git:https://github.com/reg21st/vue2-management-platform 访问:https://reg21st.github.io/vue2-management ...

  7. Vue2.0 全家桶开发的网页应用(参照吾记APP)

    github链接 借鉴吾记APP,使用 vue2.0+vue-router+vuex 为主要技术栈,elementui做为ui框架,多模块 spa 模式,webpack2.0 负责模块打包,gulp ...

  8. 一步步构造自己的vue2.0+webpack环境

    前面vue2.0和webpack都已经有接触了些(vue.js入门,webpack入门之简单例子跑起来),现在开始学习如何构造自己的vue2.0+webpack环境. 1.首先新建一个目录vue-wk ...

  9. vue2.0实战

    学了几周的vue2.0,终于有时间去做一个应用了. 为了全面联系相关知识,所以用到了vue-router,以及作者最新推荐的axios,组件库用的是饿了么的mint-ui2.0. 项目构建使用官方vu ...

随机推荐

  1. ASP.NET CORE配置信息

    做个笔记,原文链接 除了应用 IOptions<T> .Value的方式对配置信息进行全局注册外可以应用的另一个微软给出的组件,需要依赖两个包 Microsoft.Extensions.C ...

  2. Codeforces Round #342 (Div. 2) B. War of the Corporations(贪心)

    传送门 Description A long time ago, in a galaxy far far away two giant IT-corporations Pineapple and Go ...

  3. iOS网络相关知识总结

    iOS网络相关知识总结 1.关于请求NSURLRequest? 我们经常讲的GET/POST/PUT等请求是指我们要向服务器发出的NSMutableURLRequest的类型; 我们可以设置Reque ...

  4. js再学习笔记

    #js再学习笔记 ##基本 1.js严格区分大小写   2.js末尾的分号可加,也可不加   3.六种数据类型(使用typeof来检验数据的类型) `typeof` - undefined: `var ...

  5. [转]JAVA虚拟机的生命周期

    JAVA虚拟机体系结构 JAVA虚拟机的生命周期 一个运行时的Java虚拟机实例的天职是:负责运行一个java程序.当启动一个Java程序时,一个虚拟机实例也就诞生了.当该程序关闭退出,这个虚拟机实例 ...

  6. Android double输出时保留两位小数

    方法1,在代码中操作 this.totalTextview = (TextView) findViewById(R.id.package_total_money); double decimalBal ...

  7. 织梦CMS的MVC体系

    13年无意中翻看DedeCMS的代码,发现DedeCMS中是有了一个基本MVC框架的,在现有的版本中,主要是应用到了ask.book等模块上. 织梦这个东西,里面很多设计思想是非常优秀的,但整体代码的 ...

  8. Git哲学与使用

    -- 故国神游,多情应笑我,早生华发. Git是什么? Git是一个版本控制工具,代码管理工具,团队协作工具.它跟SVN等传统工具实现同样的目的:但从某种程度来说,它更快,更灵活.我想绝大多数读者都已 ...

  9. java动态生成带下拉框的Excel导入模板

    在实际开发中,由于业务需要,常常需要进行Excel导入导出操作.以前做一些简单的导入时,先准备一个模板,再进行导入,单有十几. 二十几个导入模板时,往往要做十几.二十几个模板.而且,当在模板中需要有下 ...

  10. ZeroMQ之Push与Pull (Java)

    本系列文章均转自:http://blog.csdn.net/kobejayandy/article/details/20163431 在ZeroMQ中并没有绝对的服务端与客户端之分,所有的数据接收与发 ...