Vue 3 Project Setup

Vue 3 Project Setup

Initialize a production-ready Vue 3 + JavaScript project.

Steps

1. Create project with Vite:

   pnpm create vite@latest <project-name> --template vue
   cd <project-name>
   pnpm install
   

2. Add Tailwind CSS v4:

   pnpm add -D tailwindcss @tailwindcss/vite
   

3. Configure Vite — Update vite.config.js:

   import { defineConfig } from 'vite'
   import vue from '@vitejs/plugin-vue'
   import tailwindcss from '@tailwindcss/vite'
   
   export default defineConfig({
     plugins: [vue(), tailwindcss()],
   })
   

4. Setup CSS — Replace src/style.css content:

   @import 'tailwindcss';
   

5. Create directory structure:

   src/
   ├── main.js
   ├── App.vue
   ├── style.css
   ├── composables/     # Shared state (useXxx.js)
   ├── components/      # UI components (.vue)
   ├── styles/          # Global CSS (themes, animations)
   │   └── themes/
   ├── assets/          # Static assets
   └── i18n.js          # (optional) internationalization
   

6. Generate CLAUDE.md — Run the vue-claude-md skill to create project documentation

7. Generate initial CLAUDE.md:

   cat > CLAUDE.md << 'EOF'
   # CLAUDE.md
   
   本文件为 Claude Code 在此仓库中工作时提供指引。
   
   ## 常用命令
   
   \```bash
   pnpm dev       # 启动开发服务器 (localhost:5173)
   pnpm build     # 生产构建（输出到 dist/）
   pnpm preview   # 预览生产构建
   \```
   
   ## 架构概览
   
   **技术栈**：Vue 3 + Vite + Tailwind CSS v4 + JavaScript（无 TypeScript）
   
   **状态管理**：使用 Vue 3 组合式函数（composables），未使用外部状态库。
   
   **核心约定**：
   - Tailwind 类负责布局、间距、响应式
   - CSS 自定义属性负责所有颜色和阴影
   - 组件使用 `<script setup>` + Composition API
   - Props 向下传递，emit 向上通信
   EOF
   

Optional Additions

• i18n: Create src/i18n.js with dictionary-based translations
• Theme system: Use the vue-theme-system skill to add multi-theme support
• Testing: pnpm add -D vitest @vue/test-jsdom (note: many Vue 3 JS projects skip TypeScript-tied test utils)

Verify Setup

pnpm dev
# Open http://localhost:5173