环境搭建

我们将使用 Vite 快速构建项目，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>

引入 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'
// https://vite.dev/config/
export default defineConfig({
  plugins: [vue(), tailwindcss()],
 
})

在 src/style.css 中引入：

实例

@import "tailwindcss";

body {
  @apply bg-gray-50 text-gray-800;
}