119 lines
2.6 KiB
Markdown
119 lines
2.6 KiB
Markdown
|
# paipweb 项目
|
|||
|
|
## 项目概述
|
|||
|
|
|
|||
|
|
- **项目名称**: paipweb
|
|||
|
|
- **框架**: uni-app (Vue 3 + Vite)
|
|||
|
|
- **状态管理**: Pinia
|
|||
|
|
- **样式预处理器**: Sass
|
|||
|
|
- **多语言支持**: Vue I18n
|
|||
|
|
|
|||
|
|
## 环境要求
|
|||
|
|
|
|||
|
|
- Node.js 16.0 或更高版本
|
|||
|
|
- npm 或 yarn 包管理器
|
|||
|
|
|
|||
|
|
## 安装依赖
|
|||
|
|
|
|||
|
|
```bash
|
|||
|
|
# 使用 npm
|
|||
|
|
npm install
|
|||
|
|
|
|||
|
|
# 或使用 yarn
|
|||
|
|
yarn install
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 开发环境运行
|
|||
|
|
|
|||
|
|
### H5 开发模式
|
|||
|
|
```bash
|
|||
|
|
npm run dev:h5
|
|||
|
|
```
|
|||
|
|
启动后访问 http://localhost:5173
|
|||
|
|
|
|||
|
|
### 自定义平台开发模式
|
|||
|
|
```bash
|
|||
|
|
npm run dev:custom
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### SSR 模式（H5）
|
|||
|
|
```bash
|
|||
|
|
npm run dev:h5:ssr
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 构建打包
|
|||
|
|
|
|||
|
|
### H5 构建
|
|||
|
|
```bash
|
|||
|
|
npm run build:h5
|
|||
|
|
```
|
|||
|
|
构建产物位于 `dist/build/h5` 目录
|
|||
|
|
|
|||
|
|
### 自定义平台构建
|
|||
|
|
```bash
|
|||
|
|
npm run build:custom
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### SSR 构建（H5）
|
|||
|
|
```bash
|
|||
|
|
npm run build:h5:ssr
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 项目结构
|
|||
|
|
|
|||
|
|
```
|
|||
|
|
paipweb/
|
|||
|
|
├── src/ # 源代码目录
|
|||
|
|
│ ├── App.vue # 应用入口
|
|||
|
|
│ ├── main.js # 主入口文件
|
|||
|
|
│ ├── pages/ # 页面目录
|
|||
|
|
│ │ ├── components/ # 组件目录
|
|||
|
|
│ │ └── index/ # 首页
|
|||
|
|
│ ├── stores/ # 状态管理
|
|||
|
|
│ │ └── common.js # 公共状态
|
|||
|
|
│ ├── static/ # 静态资源
|
|||
|
|
│ │ ├── fonts/ # 字体文件
|
|||
|
|
│ │ ├── imgs/ # 图片资源
|
|||
|
|
│ │ └── videos/ # 视频资源
|
|||
|
|
│ └── uni.scss # 全局样式
|
|||
|
|
├── uni_modules/ # uni-app 模块
|
|||
|
|
├── package.json # 项目配置
|
|||
|
|
├── vite.config.js # Vite 配置
|
|||
|
|
└── manifest.json # 应用配置
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 测试指南
|
|||
|
|
|
|||
|
|
### 功能测试
|
|||
|
|
1. 运行开发服务器：`npm run dev:h5`
|
|||
|
|
2. 在浏览器中访问 http://localhost:5173
|
|||
|
|
3. 测试各个页面的功能是否正常
|
|||
|
|
|
|||
|
|
### 打包测试
|
|||
|
|
1. 执行构建命令：`npm run build:h5`
|
|||
|
|
2. 检查构建产物是否完整
|
|||
|
|
3. 在服务器上部署构建产物进行测试
|
|||
|
|
|
|||
|
|
## 常见问题
|
|||
|
|
|
|||
|
|
### 依赖安装失败
|
|||
|
|
- 确保 Node.js 版本符合要求
|
|||
|
|
- 尝试清除缓存：`npm cache clean --force`
|
|||
|
|
- 使用淘宝镜像：`npm config set registry https://registry.npmmirror.com`
|
|||
|
|
|
|||
|
|
### 构建失败
|
|||
|
|
- 检查 Node.js 和 npm 版本
|
|||
|
|
- 确认所有依赖已正确安装
|
|||
|
|
- 查看控制台错误信息进行排查
|
|||
|
|
|
|||
|
|
### 样式问题
|
|||
|
|
- 检查 Sass 是否正确安装
|
|||
|
|
- 确认 uni.scss 中的变量和混入是否正确导入
|
|||
|
|
|
|||
|
|
## 开发规范
|
|||
|
|
|
|||
|
|
- 使用 Vue 3 Composition API
|
|||
|
|
- 组件命名采用 PascalCase
|
|||
|
|
- 页面文件放在 `src/pages` 目录下
|
|||
|
|
- 公共组件放在 `src/pages/components` 目录下
|
|||
|
|
- 状态管理使用 Pinia
|