Vite+ 是一体化的前端工具链,其 CLI 命令为 vp。它把运行时管理、包管理、开发/构建/测试、格式化和 lint 整合到一个工具中。
用途与使用时机: 当需要创建 Vite+ 项目、运行 vp 命令(如 vp dev、vp build、vp check 等)、配置 Vite+ 或从其他方式迁移到 Vite+,以及安装 vp 时,使用该技能。
安装与升级: 安装命令为 curl -fsSL https://vite.plus | bash 验证安装:vp help 升级:vp upgrade
创建项目: 交互式创建:vp create 非交互式指定模板(可向模板传递参数):vp create vite -- --template vanilla-ts 常用模板包括:vanilla(原生 JavaScript)、vanilla-ts(原生 TypeScript)、vue、vue-ts、react、react-ts、react-swc、react-swc-ts、svelte、svelte-ts、preact、preact-ts、lit、lit-ts、solid、solid-ts、qwik、qwik-ts。
核心命令: vp dev 启动开发服务器;vp build 生产构建;vp build --watch 构建并监听;vp preview 本地预览生产构建;vp check 一次完成格式化 + lint + 类型检查;vp check --fix 检查并自动修复;vp fmt 仅格式化;vp fmt --check 仅检查格式而不修改;vp lint 仅 lint;vp lint --fix lint 并自动修复;vp test 运行测试;vp test watch 监听模式测试;vp run <script> 运行 package.json 脚本。
包管理命令: vp install 安装依赖;vp add <pkg> 添加依赖;vp add -D <pkg> 添加开发依赖;vp remove <pkg> 移除;vp update 更新;vp cache clean 清缓存。
配置文件: Vite 构建配置写在 vite.config.ts 中,资料给出最小可用示例: import { defineConfig } from "vite";
export default defineConfig({ base: "/skill_matrix/", plugins: [], build: { outDir: "/Users/bole/Server/skill_matrix", emptyOutDir: true, }, server: { host: "127.0.0.1", port: 5175, strictPort: true, }, });
项目说明写在 package.json 中,资料给出最小可用示例: { "name": "skill_matrix", "version": "0.1.0", "private": true, "type": "module", "scripts": { "dev": "vp dev", "build": "tsc && vp build", "preview": "vp preview", "check": "vp check" }, "dependencies": { "typescript": "latest", "vite": "latest" }, "packageManager": "pnpm@11.0.9" }
CI/CD(GitHub Actions)配置示例:
- uses: voidzero-dev/setup-vp@v1 with: node-version: '22' cache: true
- run: vp install
- run: vp check
- run: vp test
- run: vp build
核心原则: 用 vp check 代替单独运行格式化、lint 与类型检查;用 vp run 执行 package.json 脚本,用 vp test 执行内置测试;不再直接使用 prettier、eslint、vitest,统一在 vite.config.ts 中配置。
适用场景: 适合需要在 Agent 开发流程中统一前端工具链、简化命令与配置,并使用多种前端框架模板快速初始化项目的场景。
限制: 资料未提供关于收费、价格、平台支持范围、性能指标等方面的信息;其具体要求与实际行为可能受版本影响,暂未提供更多细节。