mini-web2/md/运行说明.md

Purolator Vue 项目使用说明

项目概述

这是一个基于 Vue 3 + Vite 的 Purolator 配送状态管理系统，包含多个页面：

• 首页：配送状态显示
• 更新地址页面：修改配送地址表单
• 在线支付页面：重新配送服务费支付

快速开始

1. 安装依赖

npm install

2. 启动开发服务器

npm run dev

或者双击 start.bat 文件（Windows）

3. 访问应用

打开浏览器访问：http://localhost:5173（或显示的端口）

页面路由

主要页面

• 首页: / - 显示包裹配送状态
• 更新地址: /update-address - 配送地址修改表单
• 在线支付: /payment - 重新配送服务费支付

页面导航

• 从首页点击 "Update Address" 按钮可以跳转到地址更新页面
• 从首页点击 "Pay for Redelivery" 按钮可以跳转到支付页面
• 从地址更新页面可以继续到支付页面
• 各页面都包含完整的头部导航和页脚

项目结构

src/
├── components/           # Vue 组件
│   ├── HomePage.vue         # 首页组件
│   ├── UpdateAddressPage.vue # 地址更新页面
│   ├── PaymentPage.vue      # 在线支付页面
│   ├── HeaderComponent.vue   # 头部导航组件
│   └── FooterComponent.vue   # 页脚组件
├── router/              # 路由配置
│   └── index.js            # 路由定义
├── assets/              # 静态资源
├── App.vue             # 主应用组件
├── main.js             # 应用入口
└── style.css           # 全局样式

功能特点

响应式设计

• 支持桌面端和移动端
• 最大宽度 450px，确保移动端最佳体验
• 自适应布局，在不同屏幕尺寸下都有良好显示

多页面支持

• 使用 Vue Router 实现页面路由
• 单页面应用体验
• 保持原有页面设计和功能

品牌一致性

• 保持 Purolator 品牌色彩 (#001996)
• 使用原版图片和图标
• 完整的页脚信息和链接

开发说明

技术栈

• Vue 3 (Composition API)
• Vue Router 4
• Vite (构建工具)
• CSS3 (响应式设计)

添加新页面

1. 在 src/components/ 创建新的 Vue 组件
2. 在 src/router/index.js 添加路由配置
3. 确保组件包含 HeaderComponent 和 FooterComponent

样式规范

• 使用 scoped CSS 避免样式冲突
• 保持与原版设计一致的颜色和字体
• 确保移动端友好

故障排除

常见问题

1. 端口占用: 如果 5173 端口被占用，Vite 会自动选择其他端口
2. 依赖问题: 删除 node_modules 文件夹并重新运行 npm install
3. 路由问题: 确保所有页面组件都已正确导入和注册

构建生产版本

npm run build

生产文件将生成在 dist/ 目录中。

更新日志

• 添加了 Vue Router 支持
• 创建了地址更新页面
• 创建了在线支付页面
• 实现了多页面导航
• 支持信用卡支付表单验证
• 保持了原有的设计和功能