xqsapper / Vue-MintShop

:meat_on_bone: :watermelon: 尚硅谷的练习项目,使用vue2.0开发的前后端分离的外卖App。开发文档、流程完整详尽,非常适合作为个人练手项目。

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

简介

1. 项目描述

  1. 此项目为一个前后端分离的外卖 Web App (SPA) 项目
  2. 使用了 Vue 全家桶+ES6+Webpack 等前端最新技术
  3. 包括商家, 商品, 购物车, 用户等多个功能子模块
  4. 采用模块化、组件化、工程化的模式开发

2. 你能从此项目中学到什么?

2.1 项目开发流程及开发方法

  1. 熟悉一个项目的开发流程
  2. 学会组件化、模块化、工程化的开发模式
  3. 掌握使用 vue-cli 脚手架初始化 Vue.js 项目
  4. 学会模拟 json 后端数据,实现前后端分离开发
  5. 学会 ES6+eslint 的开发方式
  6. 掌握一些项目优化技巧

2.2 Vue 插件或第三方库

  1. 学会使用 vue-router 开发单页应用
  2. 学会使用 axios/vue-resource 与后端进行数据交互
  3. 学会使用 vuex 管理应用组件状态
  4. 学会使用 better-scroll/vue-scroller 实现页面滑动效果
  5. 学会使用 mint-ui 组件库构建界面
  6. 学会使用 vue-lazyload 实现图片惰加载
  7. 学会使用 mockjs 模拟后台数据接口

3. API接口文档

项目API接口文档

4. 项目开发

完整项目开发流程说明文档

5. 运行项目

mintshop-client文件夹:

  1. npm install
  2. npm run dev

开启服务端程序之前要先安装mongdb,并且成功打开数据库连接

mintshop-server文件夹:

  1. npm install
  2. npm start

6. App演示截图

Msite首页 Profile个人页 login food

About

:meat_on_bone: :watermelon: 尚硅谷的练习项目,使用vue2.0开发的前后端分离的外卖App。开发文档、流程完整详尽,非常适合作为个人练手项目。


Languages

Language:Vue 65.1%Language:JavaScript 32.3%Language:CSS 2.0%Language:HTML 0.5%