开始使用
本指南将帮助您创建第一个 VUP 项目并让它在本地运行。
前置要求
在开始之前，请确保您已安装以下工具：
- Node.js (版本 21.0.0 或更高)
- pnpm (版本 9.0.0 或更高)
您可以通过以下命令检查版本：
bash
node --version
pnpm --version安装 VUP CLI
推荐方式：使用 npx（无需全局安装）
bash
# 直接使用，无需安装
npx vup-cli --version
npx vup-cli init my-project全局安装
bash
# 使用 npm
npm install -g vup-cli
# 使用 pnpm
pnpm add -g vup-cli
# 使用 yarn
yarn global add vup-cli验证安装
bash
# 如果使用 npx
npx vup-cli --version
# 如果全局安装成功
vup --version安装问题排查
如果全局安装后 vup 命令无法使用，可以尝试以下解决方案：
方案1：使用 npx（推荐）
bash
# 直接使用 npx，无需全局安装
npx vup-cli init my-project
npx vup-cli add my-app方案2：重新安装
bash
# 卸载后重新安装
npm uninstall -g vup-cli
npm install -g vup-cli
# 或者使用 pnpm
pnpm remove -g vup-cli
pnpm add -g vup-cli注意： 最新版本在安装时会自动创建 bin 链接。如果仍然遇到问题，使用
npx是最可靠的方法。
创建新项目
1. 初始化项目
bash
# 使用 npx（推荐）
npx vup-cli init my-project
# 或使用全局安装的命令
vup init my-project这将创建一个空的 Monorepo 项目结构。
2. 进入项目目录
bash
cd my-project3. 添加应用
bash
# 使用 npx（推荐）
npx vup-cli add my-app
# 或使用全局安装的命令
vup add my-app这将提示您选择需要的模板类型：
- Vue SPA
- Nuxt.js
- VitePress
- Nest.js
- UniApp
- Capacitor
- WXT
- Components
- CLI
4. 安装依赖
bash
pnpm install5. 启动开发服务器
bash
# 启动所有应用
pnpm dev:all
# 或启动特定应用
pnpm --filter <应用名称> dev开发服务器将启动，具体端口号会在终端中显示。
项目结构
VUP 采用 Monorepo 架构，创建项目后的结构如下：
初始项目结构
bash
vup init my-project创建后的基础结构：
my-project/
├── apps/ # 应用目录（初始为空）
├── _shared/ # 共享资源
│ ├── assets/ # 共享静态资源
│ └── styles/ # 共享样式
├── .changeset/ # Changeset 配置
├── .github/ # GitHub 配置
├── .husky/ # Git hooks 配置
├── .vercel/ # Vercel 配置
├── .vscode/ # VSCode 配置
├── package.json # 根项目配置
├── pnpm-workspace.yaml # pnpm 工作区配置
├── tsconfig.json # TypeScript 配置
├── tailwind.config.js # Tailwind 配置
├── eslint.config.js # ESLint 配置
├── prettier.config.js # Prettier 配置
├── postcss.config.js # PostCSS 配置
├── vercel.json # Vercel 部署配置
├── CHANGELOG.md # 更新日志
└── README.md # 项目说明添加应用后的结构
bash
vup add my-vue-app # 添加应用，系统会提示选择模板类型
vup add my-api # 添加应用，系统会提示选择模板类型添加应用后的结构：
my-project/
├── apps/ # 应用目录
│ ├── my-vue-app/ # Vue SPA 应用
│ └── my-api/ # Nest.js 后端
├── _shared/ # 共享资源
│ ├── assets/ # 共享静态资源
│ └── styles/ # 共享样式
└── 配置文件...开发工作流
1. 开发模式
bash
pnpm --filter <应用名称> dev启动开发服务器，支持热重载。
2. 代码检查
bash
# 运行 ESLint
pnpm lint
# 自动修复 ESLint 错误
pnpm lint:fix3. 代码格式化
bash
# 格式化代码
pnpm format
# 检查格式化
pnpm format:check4. 构建项目
bash
pnpm --filter <应用名称> build构建的文件将输出到 dist 目录。
5. 预览生产构建
bash
pnpm preview本地预览生产构建。
添加应用到现有项目
如果您已经有一个项目，可以添加新的应用：
bash
# 使用 npx（推荐）
npx vup-cli add my-app
npx vup-cli add my-app --path /custom/path
npx vup-cli add my-app --force
# 或使用全局安装的命令
vup add my-app
vup add my-app --path /custom/path
vup add my-app --force模板管理
查看可用模板
bash
# 使用 npx
npx vup-cli template --list
# 或使用全局安装的命令
vup template --list更新模板
bash
# 使用 npx
npx vup-cli template --update
# 或使用全局安装的命令
vup template --update移除模板
bash
# 使用 npx
npx vup-cli template --remove
# 或使用全局安装的命令
vup template --remove语言设置
查看当前语言
bash
# 使用 npx
npx vup-cli language --current
# 或使用全局安装的命令
vup language --current重置语言设置
bash
# 使用 npx
npx vup-cli language --reset
# 或使用全局安装的命令
vup language --reset