Getting Started

This guide will help you quickly get started with VUP and create your first project.

Prerequisites

Before starting, please ensure you have the following installed:

• Node.js >= 18.0.0
• pnpm >= 8.0.0

Installation

# Install Node.js (recommended to use nvm)
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.0/install.sh | bash
nvm install 18
nvm use 18

# Install pnpm
npm install -g pnpm

Installation

Recommended: Use npx (No global installation required)

# Use directly without installation
npx vup-cli --version
npx vup-cli init my-project

Global Installation

# Install VUP CLI globally
npm install -g vup-cli

# Or use pnpm
pnpm add -g vup-cli

# Or use yarn
yarn global add vup-cli

Verify Installation

# If using npx
npx vup-cli --version

# If global installation successful
vup --version

Troubleshooting Installation Issues

If the vup command is not available after global installation, try the following solutions:

Solution 1: Use npx (Recommended)

# Use npx directly, no global installation needed
npx vup-cli init my-project
npx vup-cli add my-app

Solution 2: Reinstall

# Uninstall and reinstall
npm uninstall -g vup-cli
npm install -g vup-cli

# Or use pnpm
pnpm remove -g vup-cli
pnpm add -g vup-cli

Note: With the latest version, bin links are created automatically during installation. If you still encounter issues, using npx is the most reliable approach.

Create New Project

1. Initialize Project

# Using npx (recommended)
npx vup-cli init my-project

# Or using globally installed command
vup init my-project

# Enter project directory
cd my-project

2. Add Applications

# Using npx (recommended)
npx vup-cli add my-vue-app
npx vup-cli add my-api

# Or using globally installed command
vup add my-vue-app
vup add my-api

3. Install Dependencies

# Install all dependencies
pnpm install

4. Start Development

# Start all applications
pnpm dev:all

# Or start specific application
pnpm --filter my-vue-app dev

Project Structure

Initial Project Structure

After running vup init my-project, you'll get the following structure:

my-project/
├── apps/                    # Applications directory (initially empty)
├── .changeset/             # Changeset configuration
├── .github/                # GitHub workflows
├── .husky/                 # Git hooks
├── .vercel/                # Vercel configuration
├── .vscode/                # VSCode configuration
├── _shared/                # Shared resources
├── postcss.config.js       # PostCSS configuration
├── vercel.json             # Vercel deployment configuration
├── CHANGELOG.md            # Change log
├── README.md               # Project documentation
├── package.json            # Root package.json
├── pnpm-workspace.yaml     # pnpm workspace configuration
├── tsconfig.json           # TypeScript configuration
├── eslint.config.js        # ESLint configuration
├── prettier.config.js      # Prettier configuration
└── tailwind.config.js      # Tailwind CSS configuration

After Adding Applications

After running vup add my-vue-app, the structure becomes:

my-project/
├── apps/
│   └── my-vue-app/         # Vue application
│       ├── src/
│       ├── package.json
│       ├── vite.config.js
│       └── tsconfig.json
├── ... (other files)

Development Workflow

Daily Development

# Start development server
pnpm --filter <app-name> dev

# Build project
pnpm --filter <app-name> build

# Run linting
pnpm --filter <app-name> lint

# Fix linting issues
pnpm lint:fix

# Format code
pnpm format

# Type checking
pnpm type-check

Batch Operations

# Start all applications
pnpm dev:all

# Build all applications
pnpm build:all

# Lint all applications
pnpm lint:all

# Format all applications
pnpm format:all

Template Management

View Available Templates

# Using npx
npx vup-cli template --list

# Or using globally installed command
vup template --list

Add Templates

# Using npx (recommended)
npx vup-cli add my-app
npx vup-cli add my-vue-app --path /custom/path
npx vup-cli add my-app --force

# Or using globally installed command
vup add my-app
vup add my-vue-app --path /custom/path
vup add my-app --force

Template Configuration

Each template comes with pre-configured:

• Build Tools - Vite, Webpack, etc.
• Development Tools - ESLint, Prettier, TypeScript
• Dependencies - Framework and utility libraries
• Project Structure - Standardized directory structure

Language Settings

Set Language

# Using npx
npx vup-cli language --current
npx vup-cli language --reset

# Or using globally installed command
vup language --current
vup language --reset

Language Support

VUP supports multiple languages:

• English (en) - Default language
• Chinese (zh) - Chinese language support

Next Steps

• Learn about VUP Introduction
• Explore Available Templates
• Configure VSCode Plugins
• Set up Vercel Deployment
• Manage Version and Changelog