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地址阅读源码,如果有问题,可以在这里指出,让我们共同进步。
vue2.0构建淘票票webapp的更多相关文章
- Vuejs2.0构建一个彩票查询WebAPP(1)
说明:本人也是刚接触VUE.js,作为一个学习笔记,旨在与初学者共同学习.其中编程语法错误或者写作水平刺眼,还望轻喷. 使用工具:Visual Studio Code.技术栈为vue2+vuex+ax ...
- Vuejs2.0构建一个彩票查询WebAPP(3)
整个工程的目录及截图如下,源码下载 使用心得: 1.了解Vue的生命周期很有必要,详情参见博文Vue2.0 探索之路——生命周期和钩子函数的一些理解 2.Vuex全局状态管理真是美味不可言 st ...
- Vuex2.0+Vue2.0构建备忘录应用实践
一.介绍Vuex Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化,适合于构建中大型单页应用. ...
- vue2.0 构建单页应用最佳实战
vue2.0 构建单页应用最佳实战 前言 我们将会选择使用一些 vue 周边的库vue-cli, vue-router,vue-resource,vuex 1.使用 vue-cli 创建项目2.使 ...
- Vuejs2.0构建一个彩票查询WebAPP(2)
一,Vuex的使用 import Vue from 'vue' import Vuex from 'vuex' import MsgModules from './MsgModules' Vue.us ...
- Vue2.0仿饿了么webapp单页面应用
Vue2.0仿饿了么webapp单页面应用 声明: 代码源于 黄轶老师在慕课网上的教学视频,我自己用vue2.0重写了该项目,喜欢的同学可以去支持老师的课程:http://coding.imooc.c ...
- 适用初学者:vue2.0构建单页应用最佳实战
参考:https://segmentfault.com/a/1190000007630677 自己gitHub项目地址:https://github.com/shixiaoyanyan/vue-wor ...
- vue2.0 类淘宝不同屏幕适配及px与rem转换问题
因为项目需要,vue开发项目,必须将已写的以px为单位的部分,转换为rem.要是全部转换,这大量的计算量,哪怕是sublime Text 的cssrem插件,也是一个庞大的工作量.所以,直接使用插件没 ...
- Vue2.0 开发移动端音乐webApp 笔记
项目预览地址:http://ustbhuangyi.com/music/#/recommend 获取歌曲 url 地址方法升级:https://github.com/ustbhuangyi/vue-m ...
随机推荐
- MIP 官方发布 v1稳定版本
近期,MIP官方发布了MIP系列文件的全新v1版本,我们建议大家尽快完成升级. 一. 我是开发者,如何升级版本? 对于MIP页面开发者来说,只需替换线上引用的MIP文件为v1版本,就可以完成升级.所有 ...
- ASP.NET Core 1.1.0 Release Notes
ASP.NET Core 1.1.0 Release Notes We are pleased to announce the release of ASP.NET Core 1.1.0! Antif ...
- ABP文档 - Javascript Api - AJAX
本节内容: AJAX操作相关问题 ABP的方式 AJAX 返回信息 处理错误 HTTP 状态码 WrapResult和DontWrapResult特性 Asp.net Mvc 控制器 Asp.net ...
- WPF 微信 MVVM 【续】修复部分用户无法获取列表
看过我WPF 微信 MVVM这篇文章的朋友,应该知道我里面提到了我有一个小号是无法获取列表的,始终也没找到原因. 前两天经过GitHub上h4dex大神的指导,知道了原因,是因为微信在登录以后,web ...
- python爬取github数据
爬虫流程 在上周写完用scrapy爬去知乎用户信息的爬虫之后,github上star个数一下就在公司小组内部排的上名次了,我还信誓旦旦的跟上级吹牛皮说如果再写一个,都不好意思和你再提star了,怕你们 ...
- iOS审核这些坑,腾讯游戏也踩过
作者:Jamie,专项技术测试工程师,在iOS预审和ASO优化领域从事专项测试相关工作,为腾讯游戏近100个产品提供专项服务. WeTest 导读 在App上架苹果应用商店的过程中,相信大多数iOS开 ...
- JS实现页面进入、返回定位到具体位置
最为一个刚入职不久的小白...慢慢磨练吧... JS实现页面返回定位到具体位置 其实浏览器也自带了返回的功能,也就是说,自带了返回定位的功能.正常的跳转,返回确实可以定位,但是有些特殊场景就不适用了. ...
- Vertica 数据库知识汇总篇
Vertica 数据库知识汇总篇(更新中..) 1.Vertica 集群软件部署,各节点硬件性能测试 2.Vertica 创建数据库,创建业务用户测试 3.Vertica 数据库参数调整,资源池分配 ...
- HTML5轻松实现搜索框提示文字点击消失---及placeholder颜色的设置
在做搜索框的时候无意间发现html5的input里有个placeholder属性能轻松实现提示文字点击消失功能,之前还傻傻的在用js来实现类似功能... 示例 <form action=&quo ...
- java统计字符串单词的个数
在一些项目中可能需要对一段字符串中的单词进行统计,我在这里写了一个简单的demo,有需要的同学可以拿去看一下. 本人没怎么写个播客,如果有啥说的不对的地方,你来打我啊 不说废话了直接贴代码: 实现代码 ...