Vue3 Monorepo Builder

Vue3 Monorepo Builder

快速创建 Vue 3 Monorepo 工程，包含后台运管系统和门户介绍系统。

项目结构

project/
├── apps/
│   ├── example-app/     # 后台运管系统
│   └── example-b-app/   # 门户介绍系统
├── packages/
│   └── example-lib/    # 组件库
├── pnpm-workspace.yaml
└── package.json

快速开始

创建 Monorepo 骨架

mkdir my-project && cd my-project
pnpm init

创建以下文件：

1. package.json - 根配置
2. pnpm-workspace.yaml - workspaces 配置
3. 目录结构

安装依赖

pnpm install

创建应用

# 创建后台运管系统
pnpm create vue-app example-app

# 创建门户系统
pnpm create vue-app example-b-app --portal

常用命令

pnpm dev                              # 并行运行所有 app
pnpm --filter example-app dev         # 运行单个 app
pnpm --filter example-app build       # 构建
pnpm --filter example-app test        # 测试
pnpm --filter example-app test -- ExampleName  # 运行单个测试
pnpm --filter example-app lint        # Lint
pnpm --filter example-lib build       # 构建组件库

后台运管系统功能

• 登录页 (/​login) - 账号: rabi / rabi001
• Layout: 左侧菜单 + 顶部搜索 + 右侧内容
• Dashboard (/​dashboard): 统计数据、最近活动
• 用户管理 (/​system/​user): 表格 + 搜索 + 分页
• 角色管理 (/​system/​role): 表格 + 搜索 + 分页

门户系统功能

• 登录页 (/​login) - 任意账号密码
• PortalLayout: 顶部导航 + 内容区 + 底部
• 首页 (/​home): 企业介绍
• 关于我们 (/​about): 公司介绍、团队
• 产品服务 (/​products): 产品列表
• 联系我们 (/​contact): 联系方式、留言表单

技术栈

• Vue 3 + Composition API
• Vite 5
• TypeScript (strict)
• Pinia (状态管理)
• Vue Router 4
• Element Plus (UI 组件库)
• pnpm workspaces