VUP 是什么
VUP (Vue Universal Project) 是一个基于 Monorepo 架构的现代化项目脚手架工具，遵循"约定大于配置"的理念，帮助开发者快速创建 Vue.js 应用程序，减少配置时间，专注于业务逻辑开发。
核心理念
📋 约定大于配置
通过预定义的项目结构和配置，让开发者无需在项目初始化时做过多选择，按照既定的最佳实践来组织代码。
- 减少决策疲劳，快速开始项目
- 团队协作时保持代码风格一致
- 降低学习成本，新成员快速上手
🚀 开箱即用
所有模板都预配置了现代化的开发工具链，无需额外配置即可开始开发。
- 开发服务器和热重载
- 构建和打包工具
- 代码质量检查工具
- 样式预处理器和国际化支持
📏 统一标准
VUP 在所有模板中建立统一的开发标准，确保代码风格、项目结构和开发流程的一致性。
- 统一的代码规范 - ESLint + Prettier 配置
- 统一的项目结构 - 标准化的目录组织
- 统一的开发流程 - 一致的构建和部署流程
- 统一的类型系统 - TypeScript 类型定义
🎨 统一样式
VUP 使用 Tailwind CSS 和 SCSS 作为统一的样式系统，提供一致的设计语言和响应式设计能力。
- 主题系统 - 统一的颜色、间距、字体等设计令牌
- Tailwind CSS - 实用优先的 CSS 框架
- SCSS 支持 - 强大的样式预处理能力
- 响应式设计 - 开箱即用的移动端适配
🔧 VSCode 插件和格式化预设
VUP 推荐必要的 VSCode 插件并提供格式化预设，提高开发效率和代码质量。
- 推荐插件 - ESLint、Prettier、Volar 等
- 格式化预设 - 保存时自动格式化
- 代码提示 - 完整的 TypeScript 类型提示
- 调试配置 - 预配置的调试环境
🏗️ Monorepo 架构
将所有应用和共享资源统一管理在一个代码仓库中。
- 统一管理 - 便于版本控制和团队协作
- 共享资源 - 公共组件、样式、工具函数可复用
- 依赖管理 - 统一管理依赖版本，避免冲突
- 构建优化 - 支持增量构建，提高效率
- 独立部署 - 每个应用可以独立部署
技术规范
VUP 基于 Monorepo 架构，所有模板都预配置了统一的技术栈和开发工具：
核心技术栈
- pnpm Workspace - 包管理和依赖管理
- TypeScript - 统一的类型系统
- Vite - 快速的构建工具
- Tailwind CSS - 统一的样式系统
- SCSS - CSS 预处理器
开发工具
- ESLint + Prettier - 代码质量检查和格式化
- EditorConfig - 编辑器配置
- 自动格式化 - 保存时自动格式化
- Git Hooks - Husky 集成，提交前自动检查
版本管理
- release-it - 版本管理和发布工具
- CHANGELOG - 自动生成变更日志
项目结构
VUP 项目采用标准的 Monorepo 结构：
my-project/
├── apps/ # 应用目录
│ ├── vue-app/ # Vue 应用
│ ├── nuxt-app/ # Nuxt 应用
│ └── nest-api/ # NestJS API
├── packages/ # 功能包目录
│ ├── ui/ # UI 组件库
│ ├── iconfont/ # 图标组件
│ └── richeditor/ # 富文本编辑器
├── _shared/ # 共享资源
│ └── assets/ # 共享静态资源
│ └── styles/ # 主题系统
├── .github/ # GitHub 配置
├── .husky/ # Git Hooks
├── .vscode/ # VSCode 配置
├── deploy/ # 部署配置
├── package.json # 根配置
├── pnpm-workspace.yaml # pnpm workspace 配置
└── tsconfig.json # TypeScript 配置可用模板
VUP 提供了丰富的项目模板，用户可以通过 vup add 命令选择需要的模板添加到 Monorepo 的 apps/ 目录下，涵盖前端、后端、移动端、扩展开发等多个领域：
前端框架
- Vue SPA - Vue 3 + Vite + TypeScript + Vue Router + Pinia
- Nuxt.js - 全栈 Vue 框架，支持 SSR/SSG
- VitePress - 文档站点生成器
微前端
- Qiankun - 微前端框架，适用于大型应用
后端框架
- Nest.js - Node.js 企业级后端框架
移动端
- UniApp - 跨平台移动应用（H5、小程序、App）
- Capacitor - 混合移动应用开发平台
- Electron - 桌面应用开发框架
扩展开发
- WXT - 浏览器扩展开发框架（Chrome、Firefox、Edge）
组件库
- Components - Vue 3 组件库开发模板
工具开发
- CLI - 命令行工具开发模板
- MCP - Model Context Protocol 服务器模板
功能包
VUP 提供了可复用的功能包，可以通过 vup use 命令添加到项目中：
- @vup/ui - UI 组件库，基于 Element Plus 封装
- @vup/iconfont - Iconfont 图标组件
- @vup/richeditor - 富文本编辑器，基于 WangEditor
- @vup/nest-upload - NestJS 文件上传模块
详细文档请参考功能包文档。
主题系统
VUP 提供统一的主题系统，通过 _shared/assets/styles 目录维护全局主题与设计令牌：
- 基础色板 - 0-9 色阶的完整颜色体系
- 尺寸系统 - 间距、圆角、字号、行高等
- 语义色 - primary、success、warning、error 等
- Tailwind 集成 - 自动映射到 Tailwind CSS
详细文档请参考主题系统文档。
适用场景
VUP 适用于以下场景：
- 企业级应用开发 - 统一的技术栈和开发规范
- 多端应用开发 - Web、移动端、桌面端全覆盖
- 团队协作 - 统一的代码规范和项目结构
- 快速原型开发 - 开箱即用的模板和工具
- 微前端架构 - 支持 Qiankun 微前端方案
- 全栈开发 - 前后端一体化开发体验
核心特性
- 🚀 VUP CLI 集成 - 通过
vup add命令快速创建项目，vup use命令快速添加功能包 - 🏗️ Monorepo 架构 - 基于 pnpm workspace 的多包管理
- 🎯 多框架支持 - Vue、Nuxt、VitePress、NestJS、UniApp 等
- 🔧 TypeScript - 完整的类型支持
- ⚡ 现代化工具链 - Vite、ESLint、Prettier、Tailwind CSS
- 📦 统一依赖管理 - 共享依赖，减少重复安装
- 🌍 国际化支持 - 多语言开发模板
- 🚀 一键部署 - 集成 Vercel、Docker 等部署方案
- 📱 跨平台开发 - Web、移动端、桌面端全覆盖
- 🔄 版本管理 - 集成 release-it 进行版本控制
- 🎨 代码规范 - 统一的 ESLint 和 Prettier 配置
快速开始
要开始使用 VUP，请参考开始指南。