VUP

English

简体中文

English

简体中文

Appearance

What is VUP ​

VUP is a modern development toolkit designed to provide a unified development experience for various frontend frameworks and tools. It follows the principle of "convention over configuration" and provides out-of-the-box solutions for rapid development.

Core Philosophy ​

⚡ Convention over Configuration ​

Through predefined project structures and configurations, developers don't need to make too many choices during project initialization, organizing code according to established best practices.

  • Reduce decision fatigue, start projects quickly
  • Maintain consistent code style during team collaboration
  • Lower learning curve, new members can get started quickly

🚀 Out-of-the-Box ​

All templates come pre-configured with modern development toolchains, allowing development to begin without additional configuration.

  • Development server and hot reload
  • Build and packaging tools
  • Code quality checking tools
  • Style preprocessors and internationalization support

📏 Unified Standards ​

VUP establishes unified development standards across all templates, ensuring consistency in code style, project structure, and development workflows.

  • Unified Code Standards - ESLint + Prettier configuration
  • Unified Project Structure - Standardized directory organization
  • Unified Development Workflow - Consistent build and deployment processes
  • Unified Type System - TypeScript type definitions

🎨 Unified Style ​

VUP uses Tailwind CSS and SCSS as the unified style system, providing consistent design language and responsive design capabilities.

  • Theme System - Unified colors, spacing, fonts, and other design tokens
  • Tailwind CSS - Utility-first CSS framework
  • SCSS Support - Powerful style preprocessing capabilities
  • Responsive Design - Out-of-the-box mobile adaptation

🔧 VSCode Plugins and Formatting Presets ​

VUP recommends essential VSCode plugins and provides formatting presets to improve development efficiency and code quality.

  • Recommended Plugins - ESLint, Prettier, Volar, etc.
  • Formatting Presets - Auto-format on save
  • Code Hints - Complete TypeScript type hints
  • Debug Configuration - Pre-configured debugging environment

🏗️ Monorepo Architecture ​

All applications and shared resources are managed in a single code repository.

  • Unified Management - Easy version control and team collaboration
  • Shared Resources - Reusable common components, styles, and utility functions
  • Dependency Management - Unified dependency version management, avoiding conflicts
  • Build Optimization - Support incremental builds, improving efficiency
  • Independent Deployment - Each application can be deployed independently

Technical Specifications ​

VUP is based on Monorepo architecture, and all templates come pre-configured with unified technology stack and development tools:

Core Technology Stack ​

  • pnpm Workspace - Package and dependency management
  • TypeScript - Unified type system
  • Vite - Fast build tool
  • Tailwind CSS - Unified style system
  • SCSS - CSS preprocessor

Development Tools ​

  • ESLint + Prettier - Code quality checking and formatting
  • EditorConfig - Editor configuration
  • Auto-formatting - Format on save
  • Git Hooks - Husky integration, automatic checks before commit

Version Management ​

  • release-it - Version management and release tool
  • CHANGELOG - Automatically generated changelog

Project Structure ​

VUP projects adopt a standard Monorepo structure:

my-project/
├── apps/                    # Applications directory
│   ├── vue-app/            # Vue application
│   ├── nuxt-app/           # Nuxt application
│   └── nest-api/           # NestJS API
├── packages/               # Packages directory
│   ├── ui/                 # UI component library
│   ├── iconfont/           # Icon component
│   └── richeditor/         # Rich text editor
├── _shared/                # Shared resources
│   └── assets/            # Shared static resources
│       └── styles/        # Theme system
├── .github/                # GitHub configuration
├── .husky/                 # Git Hooks
├── .vscode/                # VSCode configuration
├── deploy/                 # Deployment configuration
├── package.json            # Root configuration
├── pnpm-workspace.yaml     # pnpm workspace configuration
└── tsconfig.json           # TypeScript configuration

Available Templates ​

VUP provides a rich set of templates covering various development scenarios. Users can add the required templates to their projects using the vup add command, and the system will prompt for template selection.

Frontend Templates ​

  • Vue SPA - Vue 3 + Vite + TypeScript + Vue Router + Pinia
  • Nuxt.js - Full-stack Vue framework with SSR/SSG support
  • VitePress - Documentation site generator

Micro-Frontend ​

  • Qiankun - Micro-frontend framework for large-scale applications

Backend Templates ​

  • Nest.js - Node.js enterprise-level backend framework

Mobile ​

  • UniApp - Cross-platform mobile applications (H5, Mini Programs, App)
  • Capacitor - Hybrid mobile application development platform
  • Electron - Desktop application development framework

Extension Development ​

  • WXT - Browser extension development framework (Chrome, Firefox, Edge)

Component Library ​

  • Components - Vue 3 component library development template

Tool Development ​

  • CLI - Command-line tool development template
  • MCP - Model Context Protocol server template

Packages ​

VUP provides reusable packages that can be added to projects using the vup use command:

  • @vup/ui - UI component library, based on Element Plus
  • @vup/iconfont - Iconfont icon component
  • @vup/richeditor - Rich text editor, based on WangEditor
  • @vup/nest-upload - NestJS file upload module

For detailed documentation, please refer to Package Documentation.

Theme System ​

VUP provides a unified theme system, maintaining global themes and design tokens through the _shared/assets/styles directory:

  • Base Color Palette - Complete color system with 0-9 color scales
  • Size System - Spacing, border radius, font size, line height, etc.
  • Semantic Colors - primary, success, warning, error, etc.
  • Tailwind Integration - Automatic mapping to Tailwind CSS

For detailed documentation, please refer to Theme System Documentation.

Use Cases ​

VUP is suitable for the following scenarios:

  • Enterprise Application Development - Unified technology stack and development standards
  • Multi-platform Application Development - Full coverage of Web, mobile, and desktop
  • Team Collaboration - Unified code standards and project structure
  • Rapid Prototyping - Out-of-the-box templates and tools
  • Micro-frontend Architecture - Support for Qiankun micro-frontend solution
  • Full-stack Development - Integrated frontend and backend development experience

Core Features ​

  • 🚀 VUP CLI Integration - Quickly create projects with vup add command, quickly add packages with vup use command
  • 🏗️ Monorepo Architecture - Multi-package management based on pnpm workspace
  • 🎯 Multi-framework Support - Vue, Nuxt, VitePress, NestJS, UniApp, etc.
  • 🔧 TypeScript - Complete type support
  • ⚡ Modern Toolchain - Vite, ESLint, Prettier, Tailwind CSS
  • 📦 Unified Dependency Management - Shared dependencies, reducing duplicate installations
  • 🌍 Internationalization Support - Multi-language development templates
  • 🚀 One-click Deployment - Integrated deployment solutions like Vercel, Docker
  • 📱 Cross-platform Development - Full coverage of Web, mobile, and desktop
  • 🔄 Version Management - Integrated release-it for version control
  • 🎨 Code Standards - Unified ESLint and Prettier configuration

Getting Started ​

To get started with VUP, please refer to the Getting Started Guide.

Next Steps ​

Copyright © 2025 VUP-CLI