基于Nodejs+Vue3的美食外卖平台(源码+开发文档)

原创已于 2025-12-10 14:33:40 修改 · 822 阅读

11 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #美食

于 2025-11-14 15:20:29 首次发布

Vue纯前端项目专栏收录该内容

6 篇文章

订阅专栏

美食外卖平台（Vue3 + TypeScript 纯前端）

一个基于 Vue3 + TypeScript + Vite + Pinia + Vue Router + Element Plus 的纯前端外卖点餐系统。无后端、无数据库，所有数据均通过本地模拟与 localStorage 持久化，适合学习与演示。

1. 技术栈

框架：Vue 3（Composition API, <script setup>）
语言：TypeScript
构建：Vite
组件库：Element Plus
路由：Vue Router 4（带路由守卫与 404 处理）
状态：Pinia（用户认证、餐厅筛选、购物车/订单）
样式：SCSS（移动端响应式）

2. 项目结构

├─ src
│  ├─ components
│  │  ├─ assistant/        # AI 助手组件（模拟推荐）
│  │  ├─ layout/           # 页头/页脚
│  │  └─ restaurant/       # 餐厅列表/详情/筛选组件
│  ├─ mock                 # 模拟数据（城市/餐厅/订单）
│  ├─ stores               # Pinia 仓库（user/restaurant/order/cart）
│  ├─ styles               # 全局样式
│  ├─ types                # TS 类型定义
│  ├─ views                # 页面：首页/登录/注册/订单列表/详情/我的订单/404
│  ├─ router               # 路由与守卫
│  ├─ App.vue
│  └─ main.ts
├─ index.html
├─ vite.config.ts
├─ tsconfig*.json
└─ package.json

3. 启动与构建

要求 Node.js ≥ 14.18（建议 ≥ 16），npm ≥ 8 更佳。

# 安装依赖
npm install

# 开发启动
npm run dev

# 生产构建
npm run build

# 预览构建产物
npm run preview

提示：

如果出现 rollup/npm 版本提示，升级 npm 至 8+ 可消除大部分警告：npm i -g npm@latest
Sass 的 legacy API 弃用仅为警告，不影响运行

4. 页面与功能

首页（餐厅列表）：
- 城市选择、分类筛选、热门筛选（满减、免配送、到店自取）
- 排序：综合、评分、销量、距离（以配送时长模拟）
- 搜索：支持通过头部搜索框传参，实时筛选结果
- 查看餐厅详情，下单（数量加减、合计金额、表单校验）
登录/注册：
- 纯前端本地认证，账号信息存储在 localStorage
- 注册：用户名/手机号/密码/城市/区域
- 登录：用户名或手机号 + 密码
订单列表：
- 全部订单查看、状态过滤、状态流转（待确认/制作中/配送中/已送达/已完成/已取消）
订单详情：
- 展示订单商品、金额、配送信息、状态快捷更新
我的订单：
- 当前登录用户的个人订单时间线视图，可“确认收货”
404：
- 未匹配路由的友好提示
AI 美食助手（模拟）：
- 悬浮按钮打开对话框，输入“想吃的内容”给出推荐（基于当前筛选/搜索逻辑）

5. 数据来源与持久化

模拟数据：src/mock（城市、餐厅、订单）
用户与认证：localStorage 键
- vd-users：注册用户列表
- vd-auth-token：登录后的模拟 token
- vd-profile：当前登录用户信息
订单：vd-orders（初始化时合并内置 mock，再持久化）