vue2.0实战项目——简单的快餐店系统

最近学习vue看到网上很多学习的资料，就找了一个项目系统练习，主要是想学习了的一些知识点，系统的组合运用一遍。网上根据技术胖老师博客的内容自己也实战了一遍，挺实用的，对vue框架有了更深入的了解以及自身能力的提升。

欢迎下载使用或二次开发。

（一）项目分析

这个项目主要是实现在线的用户点餐以及对点餐列表商品的增删改查等功能；然后使用mockplus工具画出草图，主要是方便开发。

（二）运用到的技术

1.使用vue-cli2.x搭建的开发环境；

2.使用vue-router做路由转换；

3.使用element-ui做界面美化；

4.使用axios做跨域请求接口数据；

5.使用icofont在线图标管理；

6.使用webpack打包管理；

7.使用vue2.0语法和es6语法；

（三）系统成果

（四）系统使用

1.前提是要有node.js、npm、vue-cli环境（最好有Git，会方便很多）；

2.下载项目（git clone最好）；

3.打开终端切换到该项目名称下，执行以下命令行：

# install dependencies 安装开发环境的依赖，因为不是直接打包上传的项目
npm install# serve with hot reload at localhost:8080 运行项目基本没问题
npm run dev

参考文献

技术胖老师的 Vue实战视频-快餐店收银系统

vue2.0实战项目——简单的快餐店系统相关推荐

vue2.0实战案例之高级教程-老孟编程
vue2.0实战案例之高级教程 008:vue.js前端框架安装和使用范围. vue版本升级和使用方式,vue和jquery.js,和zepto.js的优劣势分析. vue为什么无法在开发小程序里无法 ...
关于 vue3.0 实战项目 setup、 props、 reactive、ref
关于 vue3.0 实战项目中遇到的问题介绍vue3.0的特性: 亿点小知识 1.diff算法的优化增加了静态标记PatchFlag 2.按需编译,体积比Vue2.x更小(Tree shaking ...
Java实战项目之个人日记本系统【源码+课后指导】_Java毕业设计/计算机毕业设计
供大家练习学习用的Java实战项目来咯--[个人日记本系统]!Java实战项目之个人日记本系统[源码+课后指导]_Java毕业设计/计算机毕业设计https://www.bilibili.com/vi ...
vue3.0实战项目
vue3.0+typescript+vite2实战:后台管理系统一.技术栈二.功能架构三.框架搭建四.安装插件 1.路由插件vue-router4安装使用 2.vuex4的安装 3.安装sas ...
基于vue2.0+ 抽奖项目
前言临近年关抽奖活动,基于vue2.0+开发的抽奖项目. 便于查看效果,贴上相关地址: 在线示例地址:快速访问 github地址:查看源码简介基于vue.js抽奖项目,截屏保存每次抽奖图片至本地 ...
WF4.0实战(十)：分布式酒店订房系统
这篇文章主要是实现一个分布式的酒店订房功能.主要阐述如何通过WCF加WF实现一个分布式系统模型. 这个Demo的场景说明: 一家酒店将房间信息存储在SQL Server数据库中,酒店的工作人员根据客户 ...
【vue2.0后台项目之登陆】01登陆开发流程分析
登陆开发流程 1.前言 2.vue-admin-template模板介绍 3. vue-admin-template模板结构分析 4.axios的二次封装 5.请求后端接口 6.表单验证 7.派发ac ...
Get全栈技能点 Vue2.0 / Node.js / MongoDB 打造商城系统
第1章课程介绍简单回顾前端近几年的框架模式,了解不同时期下的框架特点.其次介绍Vue框架的背景和核心思想,以及同其它MV*框架的对比. 1-1 课程-导学 1-2 前端框架回顾 1-3 vue概况 ...
vue2.0创建项目步骤
一.介绍 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统.有三个组件: CLI :@vue/cli 全局安装的 npm 包,提供了终端里的vue命令(如:vue create .vu ...