277 lines
5.8 KiB
Markdown
277 lines
5.8 KiB
Markdown
# H5 Monorepo 工程
|
||
|
||
基于 pnpm workspace 的 Monorepo 项目，包含 Vue3 大屏和 Vue3 移动端两个子项目。
|
||
|
||
## 项目结构
|
||
|
||
```
|
||
H5/
|
||
├── packages/
|
||
│ ├── screen/ # Vue3 大屏项目
|
||
│ │ ├── src/
|
||
│ │ │ ├── views/
|
||
│ │ │ ├── components/
|
||
│ │ │ ├── router/
|
||
│ │ │ ├── store/
|
||
│ │ │ └── styles/
|
||
│ │ ├── vite.config.js
|
||
│ │ └── package.json
|
||
│ ├── mobile/ # Vue3 移动端项目
|
||
│ │ ├── src/
|
||
│ │ │ ├── views/
|
||
│ │ │ ├── components/
|
||
│ │ │ ├── router/
|
||
│ │ │ └── styles/
|
||
│ │ ├── vite.config.js
|
||
│ │ └── package.json
|
||
│ └── shared/ # 共享代码库
|
||
│ ├── api/ # 接口封装
|
||
│ ├── utils/ # 工具函数
|
||
│ ├── config/ # 配置文件
|
||
│ └── package.json
|
||
├── pnpm-workspace.yaml
|
||
├── package.json
|
||
└── README.md
|
||
```
|
||
|
||
## 技术栈
|
||
|
||
### 大屏项目 (screen)
|
||
- Vue 3
|
||
- Vite 5
|
||
- Vue Router 4
|
||
- Pinia
|
||
- ECharts 5
|
||
- Vue-ECharts
|
||
- Sass
|
||
|
||
### 移动端项目 (mobile)
|
||
- Vue 3
|
||
- Vite 5
|
||
- Vue Router 4
|
||
- Pinia
|
||
- Vant 4（移动端 UI 组件库）
|
||
- 自动按需引入组件
|
||
- Sass
|
||
|
||
### 共享库 (shared)
|
||
- Axios（请求封装）
|
||
- 工具函数（防抖/节流/日期格式化/深拷贝等）
|
||
- 统一配置管理
|
||
|
||
## 快速开始
|
||
|
||
### 安装依赖
|
||
|
||
```bash
|
||
# 安装 pnpm (如果还没安装)
|
||
npm install -g pnpm
|
||
|
||
# 安装所有依赖
|
||
pnpm install
|
||
```
|
||
|
||
### 开发命令
|
||
|
||
```bash
|
||
# 启动大屏项目（端口：3000）
|
||
pnpm dev:screen
|
||
|
||
# 启动 H5 移动端（端口：8080）
|
||
pnpm dev:mobile
|
||
|
||
# 构建大屏项目
|
||
pnpm build:screen
|
||
|
||
# 构建 H5 移动端
|
||
pnpm build:mobile
|
||
|
||
# 构建所有项目
|
||
pnpm build:all
|
||
|
||
# 代码检查
|
||
pnpm lint
|
||
```
|
||
|
||
## 项目说明
|
||
|
||
### 1. 大屏项目 (screen)
|
||
|
||
**访问地址：** `http://localhost:3000`
|
||
|
||
**特点：**
|
||
- 适配大屏分辨率 (1920x1080)
|
||
- 数据可视化（ECharts）
|
||
- 暗色主题设计
|
||
- 响应式布局
|
||
|
||
**目录结构：**
|
||
```
|
||
packages/screen/src/
|
||
├── views/ # 页面组件
|
||
├── components/ # 通用组件
|
||
├── router/ # 路由配置
|
||
├── store/ # Pinia 状态管理
|
||
├── assets/ # 静态资源
|
||
└── styles/ # 全局样式
|
||
```
|
||
|
||
### 2. 移动端项目 (mobile)
|
||
|
||
**访问地址：** `http://localhost:8080`
|
||
|
||
**特点：**
|
||
- 响应式设计，适配移动端
|
||
- Vant UI 组件库
|
||
- 自动按需引入，减小包体积
|
||
- 支持 PWA
|
||
- 适合嵌入第三方 APP
|
||
|
||
**可用组件：**
|
||
- NavBar（导航栏）
|
||
- Tabbar（底部导航）
|
||
- Cell/CellGroup（单元格列表）
|
||
- Grid（宫格）
|
||
- Button（按钮）
|
||
- Toast（轻提示）
|
||
- Dialog（弹窗）
|
||
- Image（图片）
|
||
- 等 60+ 组件
|
||
|
||
**目录结构：**
|
||
```
|
||
packages/mobile/src/
|
||
├── views/ # 页面组件
|
||
├── components/ # 通用组件
|
||
├── router/ # 路由配置
|
||
├── store/ # Pinia 状态管理
|
||
├── assets/ # 静态资源
|
||
└── styles/ # 全局样式
|
||
```
|
||
|
||
### 3. 共享库 (shared)
|
||
|
||
共享代码可在两个项目中复用：
|
||
|
||
```javascript
|
||
// 在项目中引入 API
|
||
import { getUserInfo, getDataList } from '@shared/api'
|
||
|
||
// 引入工具函数
|
||
import { formatDate, debounce, throttle } from '@shared/utils'
|
||
|
||
// 引入配置
|
||
import { API_CONFIG, APP_CONFIG } from '@shared/config'
|
||
```
|
||
|
||
**可用工具函数：**
|
||
- `formatDate()` - 日期格式化
|
||
- `debounce()` - 防抖
|
||
- `throttle()` - 节流
|
||
- `deepClone()` - 深拷贝
|
||
|
||
## 环境变量
|
||
|
||
项目使用 `.env` 文件管理环境变量：
|
||
|
||
- `.env.development` - 开发环境
|
||
- `.env.production` - 生产环境
|
||
|
||
**示例：**
|
||
```bash
|
||
# .env.development
|
||
VITE_API_BASE_URL=http://localhost:3000/api
|
||
```
|
||
|
||
## 开发建议
|
||
|
||
### 1. 共享代码复用
|
||
|
||
将通用的业务逻辑、API 接口、工具函数放在 `packages/shared` 中，避免重复代码。
|
||
|
||
### 2. 组件开发
|
||
|
||
- **大屏项目**：使用 ECharts 开发数据可视化组件
|
||
- **移动端项目**：优先使用 Vant 组件，减少自定义开发
|
||
|
||
### 3. 样式规范
|
||
|
||
- 使用 Sass 预处理器
|
||
- 遵循 BEM 命名规范
|
||
- 组件样式使用 `scoped`
|
||
|
||
### 4. API 请求
|
||
|
||
统一使用 `@shared/api` 中封装的请求方法，自动处理 token、错误等。
|
||
|
||
## 注意事项
|
||
|
||
1. 本项目使用 **JavaScript**，未使用 TypeScript
|
||
2. 使用 **pnpm** 作为包管理工具，不要使用 npm 或 yarn
|
||
3. 大屏和移动端项目独立运行，通过 shared 包共享代码
|
||
4. 移动端项目基于 Vue3 + Vant，**不是 uni-app**，仅支持 H5
|
||
5. 如需扩展到小程序，建议使用 uni-app 或 Taro 重新搭建
|
||
|
||
## 部署说明
|
||
|
||
### 大屏项目部署
|
||
|
||
```bash
|
||
# 构建
|
||
pnpm build:screen
|
||
|
||
# 构建产物在 packages/screen/dist
|
||
# 部署到 Nginx 或其他静态服务器
|
||
```
|
||
|
||
### 移动端部署
|
||
|
||
```bash
|
||
# 构建
|
||
pnpm build:mobile
|
||
|
||
# 构建产物在 packages/mobile/dist
|
||
# 可以嵌入到第三方 APP 的 WebView 中
|
||
```
|
||
|
||
## 浏览器支持
|
||
|
||
### 大屏项目
|
||
- Chrome >= 87
|
||
- Firefox >= 78
|
||
- Safari >= 14
|
||
- Edge >= 88
|
||
|
||
### 移动端项目
|
||
- iOS Safari >= 10
|
||
- Android Chrome >= 5.0
|
||
- 微信浏览器
|
||
|
||
## 常见问题
|
||
|
||
### 1. 端口被占用
|
||
|
||
修改对应项目的 `vite.config.js` 中的 `server.port` 配置。
|
||
|
||
### 2. 组件按需引入不生效
|
||
|
||
移动端项目使用 `unplugin-vue-components` 自动按需引入 Vant 组件，无需手动引入。
|
||
|
||
### 3. 如何添加新页面？
|
||
|
||
```bash
|
||
# 1. 在 src/views 中创建页面组件
|
||
# 2. 在 src/router/index.js 中添加路由配置
|
||
```
|
||
|
||
## 技术支持
|
||
|
||
- Vue 3 文档：https://cn.vuejs.org/
|
||
- Vant 文档：https://vant-ui.github.io/vant/
|
||
- ECharts 文档：https://echarts.apache.org/zh/index.html
|
||
- Pinia 文档：https://pinia.vuejs.org/zh/
|
||
|
||
## 许可证
|
||
|
||
MIT
|