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（请求封装）
• 工具函数（防抖/节流/日期格式化/深拷贝等）
• 统一配置管理

快速开始

安装依赖

# 安装 pnpm (如果还没安装)
npm install -g pnpm

# 安装所有依赖
pnpm install

开发命令

# 启动大屏项目（端口：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)

共享代码可在两个项目中复用：

// 在项目中引入 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 - 生产环境

示例：

# .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 重新搭建

部署说明

大屏项目部署

# 构建
pnpm build:screen

# 构建产物在 packages/screen/dist
# 部署到 Nginx 或其他静态服务器

移动端部署

# 构建
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. 如何添加新页面？

# 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