122 lines
2.7 KiB
Markdown
122 lines
2.7 KiB
Markdown
# paipweb 项目
|
||
|
||
这是一个基于 uni-app 框架开发的跨平台应用项目，支持 H5、微信小程序、支付宝小程序等多个平台。
|
||
|
||
## 项目概述
|
||
|
||
- **项目名称**: 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
|