Tech Stack Rules

Core Framework

Vue 3 (Composition API) - Primary framework
Vite 5 - Build tool and dev server
Node.js - Runtime environment

State Management & Routing

Pinia 2.1.7 - State management (replaces Vuex)
Vue Router 4.2.5 - Client-side routing

UI & Styling

UnoCSS 0.58.4 - Atomic CSS engine (Tailwind-compatible)
Vant 4.8.8 - Mobile UI component library
SCSS 1.70.0 - CSS preprocessor
@unocss/reset - CSS reset utilities

HTTP & API

Axios 1.6.5 - HTTP client for API requests

Build & Development Tools

@vitejs/plugin-vue - Vue 3 support for Vite
unplugin-auto-import - Auto-import Vue/Pinia/Router APIs
unplugin-vue-components - Auto-import Vue components
@vant/auto-import-resolver - Auto-import Vant components

Development Server

Port: 3000
API proxy: /api → http://localhost:8080
Auto-open browser on start

Package Manager

pnpm (recommended, see pnpm-lock.yaml)
Alternative: npm, yarn

Constraints

✅ Use Vue 3 Composition API (no Options API)
✅ Use UnoCSS utilities for styling (not custom CSS when possible)
✅ Use Vant components for UI elements
✅ Use Pinia for state management
✅ Use auto-import features (no manual imports for Vue/Pinia/Router)
❌ Don't use Vuex (Pinia is the standard)
❌ Don't use Webpack (Vite is configured)
❌ Don't add new CSS frameworks (UnoCSS is sufficient)