Vue与Tailwind CSS

运行环境与编辑器

• Node.js
  官网：https://nodejs.org/zh-cn/download
• VS Code
  官网：https://code.visualstudio.com/

npm配置

# 查看npm配置
npm config list
# 设置npm镜像源
npm config set registry https://registry.npmmirror.com
# 查看版本
node -v
npm -v
# 更新npm
npm install npm -g

创建项目

# 创建Vue3项目
npm create vue@latest
# 打开项目文件夹
cd vue-project
# 安装依赖项
npm install
# 启动服务器
npm run dev
# 浏览器访问
o

安装Tailwind CSS

npm install tailwindcss @tailwindcss/vite

配置Vite插件

在vite.config.ts中添加插件：

1. 导入插件：import tailwindcss from '@tailwindcss/vite'
2. 在plugins列表中添加tailwindcss()

引入Tailwind CSS

• 打开src文件夹，新建style.css文件，添加内容：@import "tailwindcss";

• 编辑main.ts文件，添加内容：import './style.css'
  或编辑index.html文件，添加内容：<link href="/src/style.css" rel="stylesheet">

• 通过在App.vue文件中编辑class使用Tailwind CSS

vscode扩展

• 扩展：Vue Official
  设置开启：Vue › Auto Insert: Dot Value
• 扩展：Tailwind CSS IntelliSense
  设置开启：Tailwind CSS: Emmet Completions