项目描述

之前一直用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与实战开发

    慕课网实战 百度云 web前端实战: Node.js入门到企业Web开发中的应用 Web前端性能优化 让你的页面飞起来 前端跳槽面试必备技巧 前端JavaScript面试技巧全套 node.JS 线上 ...

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

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

随机推荐

  1. scope.$apply是干嘛的

    开始用angular做项目的时候,一定碰到过$scope.$apply()方法,表面上看,这像是一个帮助你进行数据更新的方法,那么,它为何存在,我们又该如何使用它呢. JavaScript执行顺序 J ...

  2. css中,设置百分比后,让百分比的宽度包括padding和border来计算

    *{ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}

  3. 转:在java中使用dom4j解析xml

    JAVA 使用Dom4j 解析XML Java DOM4J Parser - Parse XML Document Dom4j下载及使用Dom4j读写XML简介 在java中使用dom4j解析xml ...

  4. Sublime Text 3 简体中文汉化包

    Sublime Text 3下载 不用说是上官方下载地址:http://www.sublimetext.com/3 Sublime Text 3 简体中文汉化包使用方法 1.将上面要求下载的subli ...

  5. ab 性能测试工具的使用(Web并发测试)

    1.下载 http://pan.baidu.com/s/1hrlAbI0 2.命令介绍 参数的介绍 n在测试会话中所执行的请求个数.默认时,仅执行一个请求. -c一次产生的请求个数.默认是一次一个. ...

  6. STL之迭代器(iterator)

    STL的中心思想在于:将数据容器和算法分开,彼此独立设计,最后再用一帖粘着剂将它们撮合在一起.没错,这个粘着剂正是迭代器(iterator).迭代器的主要目的是通过遍历来对容器中元素进行相关操作.算法 ...

  7. 简谈ubuntu之DIY发行版

    2007.05.13    二十一世纪到了,每个人都强调自己的个性,于是一种叫做DIY的东西悄然兴起. 操作系统作为全人类智慧的结晶,自然DIY起来难度极大,因而DIY出一个操作系统成就感绝对比买宜家 ...

  8. 搜狗2013年校园招聘研发类笔试试卷之C/C++类

    今天无聊在网上搜了下今年各大NB IT公司的笔试题,搜到了搜狗的,只有扫描版的试卷没有电子版也没有答案,就拿来做了做,题目非常多,涉及到C/C++.Java.数据结构.Android.IOS.Java ...

  9. FileResult,JavaScriptResult,JsonResult

    FileResult:可以响应任意文档的属性,包括二进制格式的数据,eg:图档,pdf,excel,zip,可以传入byte[],文档路径,Stream等不同的属性,让mvc将属性回传给客户端,除此之 ...

  10. linux下如何启动/停止/重启mysql:

    一.启动方式1.使用linux命令service 启动:service mysqld start2.使用 mysqld 脚本启动:/etc/inint.d/mysqld start3.使用 safe_ ...