nuxt-meituan

项目名称：高仿美团网 PC 网页版

项目简介：前端 + 服务端实战课程

学习地址：https://coding.imooc.com/class/280.html

主要页面及模块

首页 -> 城市服务、搜索推荐服务
登录注册页 -> 邮箱验证 SMTP 服务
切换城市页
商品列表页
商品详情页
购物车页
订单页

地图服务定位服务注册登录实现服务端缓存接口设计推荐搜索服务

技术栈

Vue 全家桶
Nuxt：Vue SSR 框架
Element-UI：Vue 生态圈最流行的样式库
Koa2：Node.js Web 框架
MongoDB：非关系型数据库
Mongoose：MongoDB 的一个对象模型工具
Redis：数据缓存
Apollo：分布式配置中心

主要环境参数

Nuxt.js 2.8.0
Element-ui 2.4.7
Node 8.15.0
Koa 2.6.2
Mongodb 4.0
Redis 4.0.11
Robo 3T 1.2.1

表结构设计

user 表：username、password、email

areas 表：id、city、name

menu 表：name、type、child[title, child[...]]

city 表：id、province、name

Init Project

这里记录初始化项目的相关操作

# 使用脚手架工具 create-nuxt-app 安装
$ npm i -g npx
$ npx create-nuxt-app nuxt-meituan

# create-nuxt-app v2.9.2
# ✨  Generating Nuxt.js project in `nuxt-meituan`
# ? Project name `nuxt-meituan`
# ? Project description `My stunning Nuxt.js project`
# ? Author name `bxm0927`
# ? Choose the package manager `Yarn`
# ? Choose UI framework `Element`
# ? Choose custom server framework `Koa`
# ? Choose Nuxt.js modules `Axios`
# ? Choose linting tools `ESLint`
# ? Choose test framework `None`
# ? Choose rendering mode `Universal (SSR)`

Build Setup

# install dependencies
$ yarn install

# serve with hot reload at localhost:3000
$ yarn dev

# build for production and launch server
$ yarn build
$ yarn start

# generate static project
$ yarn generate

For detailed explanation on how things work, check out Nuxt.js docs.

Deploy

服务器：CentOS 7.3 64bit

安装 Git、Node.js、NPM、Yarn、Nuxt

Q&A

本地数据库提供有限，所以很多接口都是调用线上服务

leetia316/nuxt-meituan