11、构建全栈应用：Tailwind、CORS 与 Vue 中间件实战

构建全栈应用：Tailwind、CORS 与 Vue 中间件实战

1. 创建 Tailwind 和 Vite 项目

首先，我们使用 Vite CLI 来生成项目。执行以下命令创建一个新的 Vue 项目：

npm create vite@latest

按照提示输入信息：
- 项目名称：vue - frontend
- 选择框架：vue
- 选择变体：vue

完成项目搭建后，进入项目目录并安装依赖，然后启动开发服务器：

cd vue - frontend
npm install
npm run dev

访问 http://localhost:3000 会看到 “Hello World” 输出。该项目支持 “热重载” 或 “实时重载”，修改代码保存后，浏览器中的设计会实时更新。

早期的 Tailwind CSS 会生成较大的样式表（3 - 15 MB），并减慢构建速度。从 Tailwind CSS 3 及以上版本开始，默认启用了即时（JIT）编译器，它会自动生成设计所需的 CSS，减少了冗余代码，且开发环境和最终代码的 CSS 一致，无需后期处理。

接下来，将 Tailwind CSS 添加到项目中：

npm install -D tailwindcss postcss autoprefixer
npx