🖤 一個專注于「Vue3 + TailwindCSS」的 50 天極簡開發挑戰，探索組件邊界，打磨技術鋒芒。
🎉 歡迎來到 50 個小項目的第一天！今天我們將從零開始搭建一個 Vue3 項目，并引入 Tailwind CSS v4，為后續項目做好技術準備。
💻 技術點
- 組合式API：使用Vue3的Composition API進行狀態管理
- Tailwind CSS：采用實用優先的CSS框架，提高開發效率
- 響應式設計：適配不同屏幕尺寸的布局
- 路由管理：使用Vue Router實現SPA導航
- 模塊化組織：清晰的項目結構和組件分層
📂項目結構
50days50projects/
├── public/ # 靜態資源目錄
├── src/ # 源代碼目錄
│ ├── assets/ # 項目資源文件
│ ├── components/ # 通用組件
│ ├── constants/ # 常量定義
│ ├── projects/ # 50個項目組件
│ ├── router/ # 路由配置
│ ├── sections/ # 頁面區塊組件
│ ├── App.vue # 根組件
│ ├── main.js # 入口文件
│ └── style.css # 全局樣式
├── index.html # HTML 模板
├── package.json # 項目依賴
└── vite.config.js # Vite 配置
📦 項目搭建
1. Vite 創建 vue 項目：
pnpm create vite 50-vue-projects --template vue
cd 50-vue-projects
pnpm install
pnpm dev
- 訪問
http://localhost:5173🎉
2. 集成 Tailwindcss v4
npm install -D tailwindcss@4 @tailwindcss/vite
配置vite.config.js
import vue from '@vitejs/plugin-vue'
import tailwindcss from '@tailwindcss/vite'export default defineConfig({plugins: [vue(), tailwindcss()],resolve: {alias: {'@': '/src',},},
})
編輯style.css（Tailwind CSS v4 主題化實踐入門（自定義 Theme + 主題模式切換）?）
@import 'tailwindcss';@custom-variant dark (&:is(.dark *));@theme inline {--font-sans:ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji','Segoe UI Symbol', 'Noto Color Emoji';--font-serif: ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New',monospace;--color-background: var(--background);--color-foreground: var(--foreground);--color-card: var(--card);--color-card-foreground: var(--card-foreground);--color-popover: var(--popover);--color-popover-foreground: var(--popover-foreground);--color-primary: var(--primary);--color-primary-foreground: var(--primary-foreground);--color-secondary: var(--secondary);--color-secondary-foreground: var(--secondary-foreground);--color-muted: var(--muted);--color-muted-foreground: var(--muted-foreground);--color-accent: var(--accent);--color-accent-foreground: var(--accent-foreground);--color-destructive: var(--destructive);--color-destructive-foreground: var(--destructive-foreground);--color-border: var(--border);--color-input: var(--input);--color-ring: var(--ring);--color-chart-1: var(--chart-1);--color-chart-2: var(--chart-2);--color-chart-3: var(--chart-3);--color-chart-4: var(--chart-4);--color-chart-5: var(--chart-5);--radius-sm: calc(var(--radius) - 4px);--radius-md: calc(var(--radius) - 2px);--radius-lg: var(--radius);--radius-xl: calc(var(--radius) + 4px);--color-sidebar: var(--sidebar);--color-sidebar-foreground: var(--sidebar-foreground);--color-sidebar-primary: var(--sidebar-primary);--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);--color-sidebar-accent: var(--sidebar-accent);--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);--color-sidebar-border: var(--sidebar-border);--color-sidebar-ring: var(--sidebar-ring);
}:root {--background: oklch(1 0 0);--foreground: oklch(0.145 0 0);--card: oklch(1 0 0);--card-foreground: oklch(0.145 0 0);--popover: oklch(1 0 0);--popover-foreground: oklch(0.145 0 0);--primary: oklch(0.205 0 0);--primary-foreground: oklch(0.985 0 0);--secondary: oklch(0.97 0 0);--secondary-foreground: oklch(0.205 0 0);--muted: oklch(0.97 0 0);--muted-foreground: oklch(0.556 0 0);--accent: oklch(0.97 0 0);--accent-foreground: oklch(0.205 0 0);--destructive: oklch(0.577 0.245 27.325);--destructive-foreground: oklch(0.577 0.245 27.325);--border: oklch(0.922 0 0);--input: oklch(0.922 0 0);--ring: oklch(0.708 0 0);--chart-1: oklch(0.646 0.222 41.116);--chart-2: oklch(0.6 0.118 184.704);--chart-3: oklch(0.398 0.07 227.392);--chart-4: oklch(0.828 0.189 84.429);--chart-5: oklch(0.769 0.188 70.08);--radius: 0.625rem;--sidebar: oklch(0.985 0 0);--sidebar-foreground: oklch(0.145 0 0);--sidebar-primary: oklch(0.205 0 0);--sidebar-primary-foreground: oklch(0.985 0 0);--sidebar-accent: oklch(0.97 0 0);--sidebar-accent-foreground: oklch(0.205 0 0);--sidebar-border: oklch(0.922 0 0);--sidebar-ring: oklch(0.708 0 0);
}.dark {--background: oklch(0.145 0 0);--foreground: oklch(0.985 0 0);--card: oklch(0.145 0 0);--card-foreground: oklch(0.985 0 0);--popover: oklch(0.145 0 0);--popover-foreground: oklch(0.985 0 0);--primary: oklch(0.985 0 0);--primary-foreground: oklch(0.205 0 0);--secondary: oklch(0.269 0 0);--secondary-foreground: oklch(0.985 0 0);--muted: oklch(0.269 0 0);--muted-foreground: oklch(0.708 0 0);--accent: oklch(0.269 0 0);--accent-foreground: oklch(0.985 0 0);--destructive: oklch(0.396 0.141 25.723);--destructive-foreground: oklch(0.637 0.237 25.331);--border: oklch(0.269 0 0);--input: oklch(0.269 0 0);--ring: oklch(0.439 0 0);--chart-1: oklch(0.488 0.243 264.376);--chart-2: oklch(0.696 0.17 162.48);--chart-3: oklch(0.769 0.188 70.08);--chart-4: oklch(0.627 0.265 303.9);--chart-5: oklch(0.645 0.246 16.439);--sidebar: oklch(0.205 0 0);--sidebar-foreground: oklch(0.985 0 0);--sidebar-primary: oklch(0.488 0.243 264.376);--sidebar-primary-foreground: oklch(0.985 0 0);--sidebar-accent: oklch(0.269 0 0);--sidebar-accent-foreground: oklch(0.985 0 0);--sidebar-border: oklch(0.269 0 0);--sidebar-ring: oklch(0.439 0 0);
}@layer base {body {@apply bg-black;}
}@layer utilities {.c-space {@apply px-5 sm:px-10;}.head-text {@apply bg-gradient-to-r from-[#BEC1CF] from-60% via-[#D5D8EA] via-60% to-[#D5D8EA] to-100% bg-clip-text text-3xl font-semibold text-transparent sm:text-4xl;}.btn {@apply mx-auto flex cursor-pointer items-center justify-center gap-4 rounded-md bg-black p-3 text-white transition-all active:scale-95;}.btn-ping_dot {@apply relative inline-flex h-3 w-3 rounded-full bg-green-500;}
}驗證是否成功 App.vue
<template><div class="min-h-screen bg-gray-900 text-white flex items-center justify-center"><h1 class="text-3xl font-bold text-purple-400">? Tailwind v4 + Vue3 已集成成功！</h1></div>
</template>
3. 集成 vue router
npm install vue-router@4
src下新增router/index.js
import { createWebHistory, createRouter } from 'vue-router'const routes = []const router = createRouter({history: createWebHistory(),routes,
})export default router4. 集成prettier (可選)
pnpm install -D prettier prettier-plugin-tailwindcss
根目錄新增.prettierrc
{"printWidth": 100,"tabWidth": 4,"useTabs": false,"semi": false,"singleQuote": true,"quoteProps": "as-needed","jsxSingleQuote": false,"trailingComma": "es5","bracketSpacing": true,"bracketSameLine": true,"arrowParens": "always","htmlWhitespaceSensitivity": "ignore", "vueIndentScriptAndStyle": true,"endOfLine": "lf","embeddedLanguageFormatting": "auto","plugins": ["prettier-plugin-tailwindcss"]
}根目錄新增.prettierignore
node_modules
dist
*.log
🚀 小結
今天我們完成了：
- 搭建項目框架
- 集成
Tailwindcssvue routerprettier
📅 明日預告：構建網頁主題框架！
🧠 每天進步一點點，50 天后驚艷所有人！
