环境搭建
我们将使用 Vite 快速构建项目 TaskHub，Vite 内容参考：Vite 教程。
1. 创建项目
打开终端，执行以下命令创建 Vite + Vue3 项目（选择 Script Setup 语法）：
# npm 命令 npm create vite@latest task-hub -- --template vue # yarn 命令 yarn create vite task-hub --template vue # pnpm 命令（推荐，速度更快） pnpm create vite task-hub -- --template vue
执行成功后，输出如下：
启动成功后，访问终端提示的本地地址（默认 http://localhost:5173/），即可看到 Vue3 初始页面。
2. 项目目录
我们可以进入目录：
cd task-hub
如果安装了 VS Code，可以使用 VS Code 的 code 命令打开目录，VS Code 内容参考：VS Code 教程。
code .
启动后目录结构如下：
其他相关命令：
# 安装依赖 npm install # 启动 npm run dev # 清理默认代码
2. 清理默认代码
删除 src/components/HelloWorld.vue。
清空 src/style.css。
修改 src/App.vue，代码如下：
实例
<script setup>
// JS 逻辑
</script>
<template>
<div>
<h1>TaskHub</h1>
</div>
</template>
// JS 逻辑
</script>
<template>
<div>
<h1>TaskHub</h1>
</div>
</template>
引入 Tailwind CSS
安装并配置原子化 CSS 框架。
npm install tailwindcss @tailwindcss/vite
修改 vite.config.js：
实例
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import tailwindcss from '@tailwindcss/vite'
import path from 'path'
export default defineConfig({
plugins: [
vue(),
tailwindcss(), // 激活 Tailwind v4 引擎
],
resolve: {
alias: {
'@': path.resolve(__dirname, './src'), // 配置路径别名
},
},
})
import vue from '@vitejs/plugin-vue'
import tailwindcss from '@tailwindcss/vite'
import path from 'path'
export default defineConfig({
plugins: [
vue(),
tailwindcss(), // 激活 Tailwind v4 引擎
],
resolve: {
alias: {
'@': path.resolve(__dirname, './src'), // 配置路径别名
},
},
})
在 v4 中，Tailwind 作为一个 Vite 插件运行，它会自动扫描你的 .vue 文件。
在 src/style.css 中引入：
在 Tailwind v4 中，所有的配置（主题、变量）都直接写在 CSS 里。 重置 src/style.css 如下：
实例
@import "tailwindcss";
/* v4 定义主题变量的方式 */
@theme {
--color-brand: #3b82f6;
--radius-xl: 1rem;
}
/* 全局基础样式 */
@layer base {
body {
@apply bg-slate-50 text-slate-900 antialiased;
}
}
/* v4 定义主题变量的方式 */
@theme {
--color-brand: #3b82f6;
--radius-xl: 1rem;
}
/* 全局基础样式 */
@layer base {
body {
@apply bg-slate-50 text-slate-900 antialiased;
}
}