有空一起学习

Appearance

快速开始 ​

创建项目 ​

确保你安装了最新版本的 Node.js，并且你的当前工作目录正是打算创建项目的目录：

bash
pnpm create vue@latest
bash
npm create vue@latest

这一指令将会安装并执行 create-vue，它是 Vue 官方的项目脚手架工具。你将会看到一些诸如 TypeScript 和测试支持之类的可选功能提示：

✔ Project name: … <your-project-name>
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit testing? … No / Yes
✔ Add an End-to-End Testing Solution? … No / Cypress / Nightwatch / Playwright
✔ Add ESLint for code quality? … No / Yes
✔ Add Prettier for code formatting? … No / Yes
✔ Add Vue DevTools 7 extension for debugging? (experimental) … No / Yes

Scaffolding project in ./<your-project-name>...
Done.

添加Tailwind CSS ​

安装Tailwind CSS ​

bash
pnpm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
bash
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

配置Tailwind CSS ​

在tailwind.config.js中配置

js
/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx,vue}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

创建tailwind的css文件：

css
@tailwind base;
@tailwind components;
@tailwind utilities;

导入Tailwind CSS ​

在main.ts中导入Tailwind CSS

ts
import './tailwind.css'

其他 ​

.gitignore配置 ​

.DS_Store
node_modules
dist
.env
.env.*
.env.local
.env.development
.env.production
.env.test

参考 ​

Vue 3 快速上手

Vite项目中使用tailwind css