购物卡审批
.vscode | ||
public | ||
src | ||
.env | ||
.gitignore | ||
index.html | ||
package-lock.json | ||
package.json | ||
postcss.config.cjs | ||
README.md | ||
vite.config.js |
购物卡审批系统
基于 Vue 3 + Vite 开发的移动端购物卡审批系统。
技术栈
- Vue 3
- Vite
- Element Plus
- Vue Router
- Axios
- PostCSS
功能特性
- 移动端自适应布局
- iOS 安全区域适配
- 审批详情展示
- 审批通过/驳回操作
- 审批结果页面
开发环境要求
- Node.js >= 16.0.0
- npm >= 7.0.0
安装和运行
- 安装依赖
npm install
- 启动开发服务器
npm run dev
- 构建生产版本
npm run build
项目结构
├── src/
│ ├── api/ # API 接口
│ ├── assets/ # 静态资源
│ ├── pages/ # 页面组件
│ ├── router/ # 路由配置
│ ├── utils/ # 工具函数
│ ├── App.vue # 根组件
│ └── main.js # 入口文件
├── public/ # 公共资源
├── index.html # HTML 模板
├── vite.config.js # Vite 配置
└── package.json # 项目配置
使用说明
-
审批详情页面
- 访问路径:
/approval-detail?id=xxx
- 显示申请信息
- 可进行通过/驳回操作
- 访问路径:
-
审批结果页面
- 访问路径:
/approval-result?id=xxx
- 显示审批结果和详情
- 访问路径:
环境变量配置
在 .env
文件中配置以下环境变量:
VITE_API_URL=接口基础地址
移动端适配
- 使用 postcss-pxtorem 进行单位转换
- 使用 amfe-flexible 进行 rem 适配
- 基准值:37.5px = 1rem