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 ...
随机推荐
- Xamarin+Prism开发详解六:DependencyService与IPlatformInitializer的关系
祝各位2017年事业辉煌!开年第一篇博客,继续探索Xamarin.Forms… 为什么我做Xamarin开发的时候中意于Prism.Forms框架?本章为你揭晓. 实例代码地址:https://git ...
- C++内存对齐总结
大家都知道,C++空类的内存大小为1字节,为了保证其对象拥有彼此独立的内存地址.非空类的大小与类中非静态成员变量和虚函数表的多少有关. 而值得注意的是,类中非静态成员变量的大小与编译器内存对齐的设置有 ...
- [NodeJS] 优缺点及适用场景讨论
概述: NodeJS宣称其目标是“旨在提供一种简单的构建可伸缩网络程序的方法”,那么它的出现是为了解决什么问题呢,它有什么优缺点以及它适用于什么场景呢? 本文就个人使用经验对这些问题进行探讨. 一. ...
- java head space/ java.lang.OutOfMemoryError: Java heap space内存溢出
上一篇JMX/JConsole调试本地还可以在centos6.5 服务器上进行监控有个问题端口只开放22那么设置的9998端口 你怎么都连不上怎么监控?(如果大神知道还望指点,个人见解) 线上项目出现 ...
- Partition2:对表分区
在SQL Server中,普通表可以转化为分区表,而分区表不能转化为普通表,普通表转化成分区表的过程是不可逆的,将普通表转化为分区表的方法是: 在分区架构(Partition Scheme)上创建聚集 ...
- git亲测命令
一.Git新建本地分支与远程分支关联问题 git checkout -b branch_name origin/branch_name 或者 git branch --set-upstream bra ...
- 【原创分享·微信支付】C# MVC 微信支付教程系列之现金红包
微信支付教程系列之现金红包 最近最弄这个微信支付的功能,然后扫码.公众号支付,这些都做了,闲着无聊,就看了看微信支付的其他功能,发现还有一个叫“现金红包”的玩意,想 ...
- Velocity初探小结--Velocity在spring中的配置和使用
最近正在做的项目前端使用了Velocity进行View层的数据渲染,之前没有接触过,草草过了一遍,就上手开始写,现在又回头细致的看了一遍,做个笔记. velocity是一种基于java的模板引擎技术, ...
- Entity Framework 手动使用migration里面的up 和down方法。
add-migration -IgnoreChanges 201606100717405_201606100645298_InitialCreate 执行这一句后 ,清空使用map生成的代码,个人不太 ...
- JavaScript中事件处理
先看看下面一道题目,请评价以下代码并给出改进意见: if (window.addEventListener) {//标准浏览器 var addListener = function(el, type, ...