Vue 3 + Tailwind CSS 全面知識點與案例詳解

---

一、Vue 3 核心語法知識點

1. Vue 3 基礎

• 創建 Vue 3 項目
  使用 Vite 創建項目：

  npm create vue@latest
  # 選擇需要的特性（如 TypeScript、Vue Router）
  

• 響應式數據
  使用 ref 和 reactive：

  import { ref, reactive } from 'vue';
  const count = ref(0); // 響應式變量
  const user = reactive({ name: 'Alice', age: 25 }); // 響應式對象
  

• 生命周期鉤子

  import { onMounted, onUpdated } from 'vue';
  onMounted(() => {console.log('組件掛載完成');
  });
  onUpdated(() => {console.log('組件更新完成');
  });
  

• 組件化開發
  創建組件 components/HelloWorld.vue：

  <template><div class="text-2xl font-bold text-blue-500">Hello Vue 3!</div>
  </template>
  

• 路由（Vue Router）
  安裝并配置路由：

  npm install vue-router@4
  

  router/index.js：

  import { createRouter, createWebHistory } from 'vue-router';
  const routes = [{ path: '/', component: () => import('../views/Home.vue') },{ path: '/about', component: () => import('../views/About.vue') }
  ];
  export default createRouter({ history: createWebHistory(), routes });
  

2. Tailwind CSS 集成

• 安裝依賴

  npm install -D tailwindcss postcss autoprefixer
  npx tailwindcss init -p  # 生成 tailwind.config.js 和 postcss.config.js
  

• 配置 Tailwind
  tailwind.config.js：

  module.exports = {content: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"],theme: {extend: {colors: { 'brand': '#3490dc' }, // 自定義顏色spacing: { '128': '32rem' },   // 自定義間距},},plugins: [],
  };
  

• 引入 Tailwind 樣式
  src/index.css：

  @tailwind base;
  @tailwind components;
  @tailwind utilities;
  

  main.js：

  import './index.css';
  

---

二、Tailwind CSS 核心語法知識點

1. 實用工具類

• 布局類

  <div class="flex justify-center items-center h-screen">居中容器</div>
  <div class="grid grid-cols-3 gap-4">三列網格布局</div>
  

• 顏色與背景

  <div class="bg-blue-500 text-white p-4">藍色背景白字</div>
  <div class="bg-gradient-to-r from-red-500 to-yellow-500">漸變背景</div>
  

• 文本樣式

  <h1 class="text-4xl font-bold underline">大標題</h1>
  <p class="text-gray-700 text-lg">灰色段落</p>
  

• 邊框與陰影

  <div class="border border-gray-300 rounded-lg shadow-md p-4">帶邊框和陰影的卡片</div>
  

• 交互效果

  <button class="bg-blue-500 hover:bg-blue-700 text-white py-2 px-4 rounded">懸停按鈕
  </button>
  

• 響應式設計

  <div class="block sm:hidden md:block">在小屏隱藏，中屏顯示</div>
  

2. 自定義配置

• 擴展主題
  tailwind.config.js：

  theme: {extend: {fontFamily: { sans: ['Inter', 'sans-serif'] }, // 添加字體animation: { spin: 'spin 2s linear infinite' }, // 自定義動畫},
  },
  

• 插件
  安裝插件（如 @tailwindcss/forms）：

  npm install -D @tailwindcss/forms
  

  tailwind.config.js：

  plugins: [require('@tailwindcss/forms')],
  

---

三、綜合案例：Vue 3 + Tailwind CSS 儀表盤頁面

1. 案例目標

• 創建一個響應式儀表盤頁面，包含導航欄、卡片組件、按鈕交互和動畫效果。

2. 代碼實現

src/views/Dashboard.vue

<template><div class="min-h-screen bg-gray-100"><!-- 導航欄 --><nav class="bg-white shadow-md p-4 flex justify-between items-center"><h1 class="text-2xl font-bold text-blue-600">儀表盤</h1><div class="space-x-4"><button class="bg-blue-500 hover:bg-blue-700 text-white py-2 px-4 rounded">首頁</button><button class="bg-gray-300 hover:bg-gray-400 text-gray-800 py-2 px-4 rounded">用戶</button></div></nav><!-- 主體內容 --><main class="p-6 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"><!-- 卡片組件 --><div v-for="card in cards" :key="card.title" class="bg-white rounded-lg shadow p-4"><h2 class="text-xl font-semibold mb-2">{{ card.title }}</h2><p class="text-gray-600">{{ card.description }}</p><!-- 動態類綁定 --><div :class="`mt-4 text-sm ${card.status === '活躍' ? 'text-green-500' : 'text-red-500'}`">狀態: {{ card.status }}</div></div></main><!-- 動畫按鈕 --><div class="flex justify-center mt-8"><button @click="animateButton" :class="`bg-purple-500 hover:bg-purple-600 text-white py-3 px-6 rounded transition-transform duration-300 ${isAnimating ? 'scale-110' : 'scale-100'}`">點擊動畫</button></div></div>
</template><script setup>
import { ref } from 'vue';// 響應式數據
const cards = ref([{ title: '用戶統計', description: '展示用戶增長趨勢', status: '活躍' },{ title: '銷售額', description: '本月銷售額分析', status: '活躍' },{ title: '錯誤日志', description: '最近的系統錯誤', status: '停用' },
]);const isAnimating = ref(false);// 動畫觸發
const animateButton = () => {isAnimating.value = true;setTimeout(() => {isAnimating.value = false;}, 300);
};
</script>

3. 代碼注釋說明

• 導航欄：使用 flex 布局實現響應式導航欄，結合 shadow-md 添加陰影效果。
• 卡片組件：通過 grid 布局實現響應式多列卡片，使用 v-for 動態渲染。
• 動態類綁定：根據卡片狀態動態切換文字顏色（綠色/紅色）。
• 動畫按鈕：通過 ref 控制按鈕的 scale 變化，實現點擊縮放動畫。

---

四、常見問題與解決方案

1. Tailwind 樣式未生效
   • 檢查 tailwind.config.js 的 content 路徑是否正確。
   • 確保 index.css 已正確引入到 main.js。
2. 響應式設計失效
   • 檢查是否遺漏 viewport meta 標簽：

     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     

3. 動畫性能問題
   • 使用 transition 和 duration 控制動畫流暢度，避免過度渲染。

---

五、總結

通過本案例，你掌握了：

• Vue 3 的核心語法（響應式數據、組件化、路由）。
• Tailwind CSS 的實用工具類和自定義配置。
• 如何結合 Vue 3 和 Tailwind CSS 構建響應式、交互式界面。

下一步建議：

• 學習 Vue 3 的 Composition API 和 Pinia 狀態管理。
• 探索 Tailwind CSS 的插件生態（如 @tailwindcss/typography）。
• 實踐更復雜的項目（如管理系統、電商網站）。