Vue3 + Tailwind CSS
Vue3 与 Tailwind CSS 入门指南
专为编程小白设计的Vue3和Tailwind CSS知识汇总，用最简单的方式理解现代前端开发
为什么选择 Vue3 + Tailwind CSS?
- ✓ Vue3 – 简单易学，性能强大，适合初学者
- ✓ Tailwind CSS – 无需编写CSS，快速构建漂亮界面
- ✓ 完美组合 – 一起使用提高开发效率10倍以上
Vue3 核心知识点
组合式API (Composition API)
Vue3 最大的变化，让你像写普通函数一样组织代码。
- setup() – 组件的入口函数
- ref() – 创建响应式数据（基本类型）
- reactive() – 创建响应式对象
- computed() – 创建计算属性
- watch() – 监听数据变化
响应式系统
Vue3 使用 Proxy 重写了响应式系统，性能更好。
- ref – 用于基本类型（字符串、数字等）
- reactive – 用于对象和数组
- toRefs – 将 reactive 对象转换为多个 ref
- watchEffect – 自动追踪依赖并执行
- 无需.value – 在模板中直接使用，无需.value
组件与模板
组件是Vue的核心概念，模板是写HTML的地方。
- 单文件组件(.vue) – 包含 template, script, style
- 模板语法 – {{ 双大括号 }} 插值
- 指令 – v-if, v-for, v-bind, v-on 等
- 组件通信 – props 和 emit
- 插槽(Slot) – 内容分发
生命周期
组件从创建到销毁的过程，Vue3有这些生命周期钩子：
- setup() – 最先执行，组件创建前
- onBeforeMount – 挂载前
- onMounted – 挂载完成
- onBeforeUpdate – 更新前
- onUpdated – 更新完成
- onBeforeUnmount – 卸载前
- onUnmounted – 卸载完成
Vue Router
官方路由管理器，用于构建单页面应用。
- 路由配置 – 定义路径和组件的映射
- 路由跳转 – router-link 或 router.push()
- 动态路由 – /user/:id 形式
- 路由守卫 – 控制导航行为
- 嵌套路由 – 子路由配置
Vuex/Pinia
状态管理，用于跨组件共享数据。
- Vuex – Vue2的官方状态管理
- Pinia – Vue3推荐的状态管理库
- State – 存储数据的地方
- Getters – 相当于计算属性
- Actions – 处理异步操作
- Mutations – 修改state的唯一方式(Vuex)
Tailwind CSS 核心知识点
什么是Tailwind CSS?
一个实用优先(Utility-First)的CSS框架，通过类名实现样式。
- 无需自己写CSS，使用预定义的类
- 高度可定制化
- 响应式设计内置
- 不会有无用的CSS，生产环境很小
- 与任何框架兼容
核心概念
理解这些概念，Tailwind就掌握了80%
- 实用类(Utility Classes) – 每个类只做一件事
- 响应式设计 – 使用前缀如 md:, lg:
- 悬停、聚焦状态 – 使用 hover:, focus:
- 暗黑模式 – dark: 前缀
- 自定义配置 – tailwind.config.js
常用工具类
日常开发最常用的Tailwind类
- 布局 – flex, grid, block, hidden
- 间距 – m-4, p-4, space-x-4
- 尺寸 – w-16, h-16, min-w-full
- 颜色 – bg-blue-500, text-white
- 边框 – border, rounded-lg
响应式设计
Tailwind 让响应式设计变得简单
- 断点前缀 – sm:, md:, lg:, xl:, 2xl:
- 例如: md:text-center
- 移动优先: 不加前缀是手机，md是平板，lg是桌面
- 可以组合使用: md:hover:bg-blue-500
自定义与配置
Tailwind 非常灵活，可以完全自定义
- 修改 tailwind.config.js 文件
- 可以自定义颜色、字体、间距等
- 可以添加自己的实用类
- 可以启用禁用某些功能
- 支持插件扩展功能
Tailwind 最佳实践
高效使用Tailwind的技巧
- 不要过度使用 @apply
- 使用编辑器插件提高效率
- 组合使用类，而不是写新类
- 使用组件思维构建UI
- 定期清理未使用的样式
在 Vue3 中使用 Tailwind CSS
安装与配置
在Vue3项目中安装Tailwind CSS的步骤：
# 使用 npm 安装 Tailwind 及其依赖
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
# 生成配置文件
npx tailwindcss init -p
# 创建 tailwind.config.js 并配置
module.exports = {
content: [
"./index.html",
"./src/**/*.{vue,js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}
# 在 src 目录下创建样式文件，如 src/tailwind.css
@tailwind base;
@tailwind components;
@tailwind utilities;
然后在 main.js 中引入 tailwind.css 文件
使用示例
在Vue组件中使用Tailwind的简单示例：
<template>
<div class="max-w-md mx-auto bg-white rounded-xl shadow-md overflow-hidden md:max-w-2xl">
<div class="md:flex">
<div class="md:shrink-0">
<img class="h-48 w-full object-cover md:h-full md:w-48"
src="/img/store.jpg" alt="商店图片">
</div>
<div class="p-8">
<div class="uppercase tracking-wide text-sm text-indigo-500 font-semibold">
特惠活动
</div>
<a href="#" class="block mt-1 text-lg leading-tight font-medium text-black hover:underline">
全场商品5折起
</a>
<p class="mt-2 text-gray-500">
活动时间：即日起至本月底，所有商品参与折扣活动，部分商品低至5折。
</p>
<button class="mt-4 px-4 py-2 bg-indigo-600 text-white rounded-md hover:bg-indigo-700">
立即购买
</button>
</div>
</div>
</div>
</template>
最佳实践
组件化思维
在Vue单文件组件中：
- 使用 @apply 提取重复的类组合
- 为复杂组件创建子组件
- 使用 props 控制样式变化
动态类名
Vue3 中动态绑定类名：
<div :class="[
'p-4 rounded-lg',
isActive
? 'bg-blue-500 text-white'
: 'bg-gray-200 text-gray-800'
]">
动态样式示例
</div>
Vue3 + Tailwind 综合示例
计数器组件
一个简单的计数器，演示Vue3响应式与Tailwind样式
{{ count }}
<script setup>
import { ref, computed } from 'vue'
const count = ref(0)
const darkMode = ref(false)
const increment = () => count.value++
const decrement = () => count.value--
const reset = () => count.value = 0
</script>
<template>
<div :class="{ 'bg-gray-800 text-white': darkMode, 'bg-white': !darkMode }" class="p-8 rounded-xl">
<div class="text-6xl font-bold mb-8">{{ count }}</div>
<div class="flex space-x-4">
<button @click="decrement" class="px-6 py-3 bg-red-500 text-white rounded-lg hover:bg-red-600">
减少
</button>
<button @click="increment" class="px-6 py-3 bg-green-500 text-white rounded-lg hover:bg-green-600">
增加
</button>
<button @click="reset" class="px-6 py-3 bg-gray-500 text-white rounded-lg hover:bg-gray-600">
重置
</button>
</div>
</div>
</template>
待办事项列表
演示Vue3响应式数组操作与Tailwind样式
- {{ todo.text }}
共 {{ todos.length }} 项
已完成 {{ completedCount }} 项
<script setup>
import { ref, computed } from 'vue'
const newTodo = ref('')
const todos = ref([
{ text: '学习 Vue3', completed: true },
{ text: '掌握 Tailwind', completed: false },
{ text: '构建一个项目', completed: false }
])
const completedCount = computed(() => {
return todos.value.filter(todo => todo.completed).length
})
const addTodo = () => {
if (newTodo.value.trim() === '') return
todos.value.push({ text: newTodo.value, completed: false })
newTodo.value = ''
}
const removeTodo = (index) => {
todos.value.splice(index, 1)
}
</script>