vite-plus

Vite+ (vp) Usage Skill

Overview

Vite+ is an all-in-one frontend toolchain that integrates runtime management, package management, development/build/testing, formatting, and linting. The CLI command is vp。

When to Use

Triggered when the user mentions the following intents:

Create a Vite+ project
Run vp commands (vp dev, vp build, vp check, etc.)
Configure Vite+ or migrate to Vite+

Install vp

curl -fsSL https://vite.plus | bash

Verify:vp help Upgrade:vp upgrade

Create a Project

Interactive creation:

vp create

Non-interactive template specification:

vp create vite -- --template vanilla-ts # 传递参数给模板

Common templates:

Value	Meaning
`vanilla`	Native JavaScript
`vanilla-ts`	Native TypeScript
`vue`	Vue + JavaScript
`vue-ts`	Vue + TypeScript
`react`	React + JavaScript
`react-ts`	React + TypeScript
`react-swc`	React + JavaScript（SWC）
`react-swc-ts`	React + TypeScript（SWC）
`svelte`	Svelte + JavaScript
`svelte-ts`	Svelte + TypeScript
`preact`	Preact + JavaScript
`preact-ts`	Preact + TypeScript
`lit`	Lit + JavaScript
`lit-ts`	Lit + TypeScript
`solid`	Solid + JavaScript
`solid-ts`	Solid + TypeScript
`qwik`	Qwik + JavaScript
`qwik-ts`	Qwik + TypeScript

Core Commands

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 脚本

Package Management

vp install          # 安装依赖
vp add <pkg>        # 添加依赖
vp add -D <pkg>     # 添加开发依赖
vp remove <pkg>     # 移除
vp update           # 更新
vp cache clean      #清缓存

Configuration Files

Vite build configuration (vite.config.ts)

Minimal usable configuration:

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,
  },
});

Project description (package.json)