2025-11-18 09:14:20 +08:00
|
|
|
# 结婚证书 H5 应用
|
2025-11-14 18:55:27 +08:00
|
|
|
|
2025-11-18 09:14:20 +08:00
|
|
|
## 项目介绍
|
|
|
|
|
这是一个基于 Vue 3 + TypeScript + Vite 构建的结婚证书 H5 应用,提供结婚证书信息填写、展示和核销功能。
|
2025-11-14 18:55:27 +08:00
|
|
|
|
2025-11-18 09:14:20 +08:00
|
|
|
## 技术栈
|
|
|
|
|
- **前端框架**: Vue 3
|
|
|
|
|
- **语言**: TypeScript
|
|
|
|
|
- **构建工具**: Vite
|
|
|
|
|
- **UI 框架**: Tailwind CSS
|
|
|
|
|
- **路由**: Vue Router
|
|
|
|
|
- **HTTP 客户端**: Axios
|
|
|
|
|
|
|
|
|
|
## 功能特点
|
|
|
|
|
- 结婚证书信息表单填写
|
|
|
|
|
- 验证码输入与验证
|
|
|
|
|
- 二维码展示与核销状态显示
|
|
|
|
|
- 移动端适配与键盘优化
|
|
|
|
|
- 响应式设计,适配不同尺寸设备
|
|
|
|
|
|
|
|
|
|
## 项目结构
|
|
|
|
|
```
|
|
|
|
|
src/
|
|
|
|
|
├── App.vue # 应用主组件
|
|
|
|
|
├── main.ts # 应用入口
|
|
|
|
|
├── pages/ # 页面组件
|
|
|
|
|
│ └── home/ # 首页
|
|
|
|
|
├── components/ # 通用组件
|
|
|
|
|
├── router/ # 路由配置
|
|
|
|
|
├── services/ # API 服务
|
|
|
|
|
├── utils/ # 工具函数
|
|
|
|
|
├── types/ # TypeScript 类型定义
|
|
|
|
|
└── assets/ # 静态资源
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
## 开发环境
|
|
|
|
|
|
|
|
|
|
### 安装依赖
|
|
|
|
|
```bash
|
|
|
|
|
pnpm install
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
### 启动开发服务器
|
|
|
|
|
```bash
|
|
|
|
|
pnpm dev
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
### 构建生产版本
|
|
|
|
|
```bash
|
|
|
|
|
pnpm build
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
### 预览构建结果
|
|
|
|
|
```bash
|
|
|
|
|
pnpm preview
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
## 移动端适配说明
|
|
|
|
|
项目已针对移动端设备进行了优化,包括:
|
|
|
|
|
- 响应式视口设置
|
|
|
|
|
- 键盘弹出时的界面处理
|
|
|
|
|
- 触摸交互优化
|
|
|
|
|
|
|
|
|
|
## 注意事项
|
|
|
|
|
- 开发环境 API 地址配置在 `.env.development` 文件中
|
|
|
|
|
- 生产环境 API 地址配置在 `.env.production` 文件中
|