paipweb 项目

项目概述

• 项目名称: paipweb
• 框架: uni-app (Vue 3 + Vite)
• 状态管理: Pinia
• 样式预处理器: Sass
• 多语言支持: Vue I18n

环境要求

• Node.js 16.0 或更高版本
• npm 或 yarn 包管理器

安装依赖

# 使用 npm
npm install

# 或使用 yarn
yarn install

开发环境运行

H5 开发模式

npm run dev:h5

启动后访问 http://localhost:5173

自定义平台开发模式

npm run dev:custom

SSR 模式（H5）

npm run dev:h5:ssr

构建打包

H5 构建

npm run build:h5

构建产物位于 dist/build/h5 目录

自定义平台构建

npm run build:custom

SSR 构建（H5）

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 页面后续可能会变更为弹幕组件
  • 缺省图
    • 各个页面/组件缺省图需要更换