当前位置:首页 > 技术分析 > 正文内容

基于vue2+vuex构建一个具有45个页面的大型单页面应用

ruisui883个月前 (02-03)技术分析19

网上关于vue的实战项目源码大部分是一些demo,还有一部分是逻辑严谨度低、页面间交互简单的展示型项目,如音乐播放器等等。为了帮助大家更加深入的了解vue,bailicangdu在GitHub上贡献了自己基于 vue2 + vuex 构建的具有 45 个页面的大型单页面应用。

由于开放的外卖平台比一般的公司独有商店更加复杂,所以bailicangdu选定以饿了么为素材,该项目从零布局到完成共历时两个月,大大小小共 45 个页面,涉及注册、登陆、商品展示、购物车、下单等等,是一个完整的流程。目前该项目正在进行一些性能的优化,增加详细的注释。

“饿了么”的相关实现功能:

“饿了么”项目布局:

“饿了么”最终演示图:

城市列表页:

搜索地址页:

商铺列表页:

商铺筛选页:

餐馆食品列表与购物车:

确认订单页:

搜索页:

登录页:

个人中心:

GitHub地址传送门:
https://github.com/bailicangdu/vue2-elm

扫描二维码推送至手机访问。

版权声明:本文由ruisui88发布,如需转载请注明出处。

本文链接:http://www.ruisui88.com/post/1488.html

标签: vue 多页面
分享给朋友:

“基于vue2+vuex构建一个具有45个页面的大型单页面应用” 的相关文章

面试被逼疯:聊聊Python Import System?

面试官一个小时逼疯面试者:聊聊Python Import System?对于每一位Python开发者来说,import这个关键字是再熟悉不过了,无论是我们引用官方库还是三方库,都可以通过import xxx的形式来导入。可能很多人认为这只是Python的一个最基础的常识之一,似乎没有可以扩展的点了,...

15款测试html5响应式的在线工具

手机、平板灯手持设备的增多,网站要顺应变化,就必须要做响应式开发,响应式网站最大的特点在于可以在不同设备下呈现不同的布局,是基于html5+css3技术,目前越来越多的网站开始采用了响应式设计,而下面15款工具可以方便测试你的html5响应式效果。Responsinatorhttp://www.re...

JS数组过滤元素的方法

引言JavaScript 作为前端开发的核心技术之一,在现代 Web 开发中扮演着举足轻重的角色。随着 Web 应用越来越复杂,高效处理数据集合的需求日益凸显。本文旨在介绍 JavaScript 中数组过滤的基础知识及其在实际项目中的应用技巧。技术概述定义数组过滤是 JavaScript 提供的一种...

「干货」Vue+Element前端导入导出Excel

作者:xrkffgg转发链接:https://segmentfault.com/a/11900000189936191 前言1.1 业务场景由前台导入Excel表格,获取批量数据。根据一个数组导出Excel表格。2 实现原理2.1 引入工具库file-saver、xlsx、script-loader...

慕课 SpringBoot2.X+Vue+UniAPP,全栈开发医疗小程序

本课程以业务驱动技术栈,打造业务相对完整的掌上医疗小程序,解决大家没有好的毕设项目或者求职项目的困境。本课程案例采用前后端分离架构,业务功能完善(既有WEB管理端,也有移动用户端),界面美观,无需艰涩的技术也能做出亮眼的作品。SpringBoot2.X+Vue+UniAPP,全栈开发医疗小程序 |...

SpringCloudalibaba+Vue开发仿社交小程序-青牛白马七香车

Spring Cloud Alibaba和Vue是当今开发领域中最为流行的技术组合之一。本文将介绍如何使用Spring Cloud Alibaba和Vue开发仿社交小程序。download: https://www.97yrbl.com/t-1632.html项目概述本项目是一个仿社交小程序,包括用...