高仿饿了么，以nuxt作为vue的服务端渲染，适合刚接触或者准备上vue ssr的同学参考和学习

项目地址如遇网络不佳，请移步国内镜像加速节点

效果演示

查看demo请戳这里（请用chrome手机模式预览）

移动端扫描下方二维码

API接口文档

个人资料

我的

订餐

商家评价

说明

如果对您有帮助，您可以点击项目"Star" 支持一下 谢谢！ ^_^

或者您可以 "follow" 一下，我会不断开源更多的有趣的项目

如有问题请直接在 Issues 中提，或者您发现问题并有非常好的解决方案，欢迎 PR 👍

开发日常记录

nuxt模版搭建

这里关于项目初始化，我是直接使用的 Nuxt 官网提供的 starter 模板

 # 安装 vue-cli npm install -g vue-cli  # 初始化项目 vue init nuxt-community/starter-template nuxt-ssr-demo  # 安装依赖 cd nuxt-ssr-demo npm install  # 启动本地服务 npm run dev 

访问 http://localhost:3000 ，现在我们来看下初始化好的项目目录

 ├── assets                      // 静态资源 ├── components                  // 全局组件 ├── layouts                     // 页面布局 ├── middleware                  // 中间件 ├── pages                       // 路由页面 ├── static                      // 静态资源，打包文件名不会被hash ├── store                       // vuex ├── nuxt.config.js              // nuxt配置文件 ├── package.json ├── README.md 

注意：nuxt默认会读取pages里面的vue文件，自动生成路由，如需要自定义路由，可在nuxt.config.js中配置对应参数。

request请求封装

数据和展示层的剥离是有必要的，这也是为什么前端都提倡MV*的设计模式，而对request请求封装是我们第一步要完成的。这里我选了axios作为HTTP请求客户端，axios兼容浏览器端和node端，同时提供了请求拦截、响应拦截等让我们开发更加愉快的功能。

在 config/index.js中写入：

 const json = require('../package.json'); const port = json.config.nuxt.port;  module.exports = {   IS_RELEASE: true, // true线上，false测试    BASE_URL: `http://localhost:${port}/api`, // 测试    // BASE_URL: `https://elm.caibowen.net/api`, // 生产    // IMG_URL: 'http://localhost:9000/', // 测试    IMG_URL: 'https://easytuan.gitee.io/node-elm-api/public/', // 生产（使用码云Gitee Pages 服务）    HEADERS: {     'Content-Type': 'application/json;charset=UTF-8'   },    TIMEOUT: 12000, // api超时时间  }; 

在 assets/utils/request.js中写入：

 import axios from 'axios'; import config from 

                    

                        
关键字：