161 lines
4.1 KiB
Markdown
161 lines
4.1 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 # 主入口文件
|
||
│ ├── api/ # API 接口
|
||
│ │ └── api.js # API 配置
|
||
│ ├── pages/ # 页面目录
|
||
│ │ ├── comments/ # 评论组件
|
||
│ │ ├── findmore/ # 发现更多组件
|
||
│ │ ├── head/ # 下载应用组件
|
||
│ │ ├── index/ # 首页
|
||
│ │ ├── intereact/ # 互动组件
|
||
│ │ ├── news.vue # 新闻页面
|
||
│ │ ├── post.vue # 帖子页面
|
||
│ │ └── video.vue # 视频页面
|
||
│ ├── stores/ # 状态管理
|
||
│ │ └── common.js # 公共状态
|
||
│ ├── static/ # 静态资源
|
||
│ │ ├── fonts/ # 字体文件
|
||
│ │ ├── imgs/ # 图片资源
|
||
│ │ ├── logo.png # 应用图标
|
||
│ │ └── videos/ # 视频资源
|
||
│ ├── pages.json # 页面配置
|
||
│ ├── manifest.json # 应用配置
|
||
│ └── uni.scss # 全局样式
|
||
├── uni_modules/ # uni-app 模块（包含各种UI组件）
|
||
├── package.json # 项目配置
|
||
├── vite.config.js # Vite 配置
|
||
├── index.html # HTML 入口文件
|
||
└── 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
|
||
|
||
# 当前存在问题
|
||
|
||
- 目前是自动跳转到指定页面，后续按需修改跳转逻辑
|
||
- 等待阶段：当前还没有添加等待动画，后续按需添加
|
||
- 加载失败：缺省图貌似需要修改
|
||
- 页面布局问题
|
||
- FindMore 组件：目前采用 fixed 定位，固定在页面底部
|
||
- Video 页面：视频与评论在拉动时，评论和右侧互动区域会跟随浏览器窗口向上移动，导致重叠遮挡问题；右侧互动区域图标需要更换
|
||
- Post/News 页面：评论组件互动区域布局问题（可以先检查）
|
||
- 评论组件
|
||
- 互动区域图标需要更换
|
||
- 评论父子关系需要使用数据中的 parent（Comment）Id 进行追踪再展示（还没有实现）
|
||
- 在 video 页面后续可能会变更为弹幕组件
|
||
- 缺省图
|
||
- 各个页面/组件缺省图需要更换
|