nuxt2+vue构建的外卖app源码分享
介绍
前端界面采用nuxt2作为vue的服务端渲染,适合刚接触或者准备上vue ssr的同学参考和学习, 此项目涉及注册、登录、商品展示、地址管理等等,从前端到后端到最后到服务端部署,让你体验到全栈开发到乐趣。
Demo预览地址为:https://elm.caibowen.net/
后端接口地址API: https://easytuan.gitee.io/node-elm-api/doc
项目运行操作
#安装项目依赖
npm install
#启动运行项目
npm run dev
项目分前后端,前端是:easytuan-nuxt-elm 后端为:node-elm-api
注:后端需要安装mongodb数据库
前端目录结构:
├── assets // 静态资源 │ ├── images // 图片资源 │ ├── services // api请求 │ ├── styles // 样式文件 │ └── utils // 常用工具类 ├── components // 组件 ├── config │ └── index.js // 配置文件 ├── layouts // 布局 ├── middleware // 中间件 ├── pages // 页面 ├── plugins // 插件 ├── static // 静态资源 └── store //vuex状态树
后端目录结构:
├── config // 配置文件
│ ├── default.js // 默认配置
│ └── development.js // 开发环境
├── controller // 处理中心,负责路由及数据库的具体操作
│ ├── common
│ │ ├── homeData.js // 首页数据
│ │ └── position.js // 根据ip获取位置
│ ├── shopping
│ │ ├── business.js // 餐馆详情
│ │ └── restaurants.js // 商家列表
│ └── user
│ ├── address.js // 用户地址
│ └── user.js // 用户中心
├── doc // apidoc自动生成的静态文档
├── InitData // 模拟数据
│ ├── business.js
│ ├── home.js
│ └── restaurants.js
├── models // 模型(数据库)
│ ├── common
│ │ └── common.js // 通用模型
│ ├── shopping
│ │ ├── business.js // 餐馆详情模型
│ │ └── restaurants.js // 商家列表模型
│ └── user
│ ├── address.js // 用户地址
│ └── user.js // 用户中心
├── mongodb // 连接数据库
│ └── db.js
├── public // 静态资源目录
├── routes // 路由配置
│ ├── common.js // 通用
│ ├── index.js // 路由配置主文件
│ ├── shopping.js // 餐馆、食品
│ └── user.js // 用户中心
├── screenshots // 项目截图
├── .babelrc
├── .gitignore
├── app.js // 基础配置
├── COPYING // GPL协议
├── index.js // 入口文件
├── package.json
└── README.md
效果图如下: