Hello 大家好，今天我们将一起踏上冒险之旅，学习如何使用
Vite配置UnoCSS，并添加个性化的 Class 来美化我们的页面。准备好了吗？让我们开始吧！
🏰 第一步：初始化Unocss项目
首先，我们需要创建一个新的 Vite 项目。如果你还没有安装 pnpm，请先施放这个魔法：
bash
npm install -g pnpm接下来，我们创建一个新的 Vite 项目：
bash
pnpm create vite my-uno-project --template vanilla进入项目目录：
bash
cd my-uno-project⚗️ 第二步：安装魔法依赖
现在我们需要安装 UnoCSS 和一些必要的插件：
bash
pnpm add unocss @unocss/preset-uno @unocss/preset-attributify🛠 第三步：配置 Vite 魔法书
在项目根目录下创建一个 vite.config.js 文件，并添加以下内容：
javascript
import { defineConfig } from 'vite'
import UnoCSS from 'unocss/vite'
import presetUno from '@unocss/preset-uno'
import presetAttributify from '@unocss/preset-attributify'
export default defineConfig({
plugins: [
UnoCSS({
presets: [
presetUno(),
presetAttributify(),
],
}),
],
})🎨 第四步：施放 UnoCSS 魔法
现在我们已经配置好了 Vite 和 UnoCSS，可以在我们的项目中开始施展魔法了。打开 index.html 文件，并添加一些简单的样式：
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>UnoCSS with Vite</title>
<script type="module" src="/main.js"></script>
</head>
<body>
<div class="text-center text-xl m-4 p-4">
<h1 class="text-2xl font-bold">Hello UnoCSS! 👋</h1>
<p class="text-lg text-gray-600">Welcome to the magical world of UnoCSS with Vite and pnpm! 🧙♂️</p>
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
Click me! 🖱️
</button>
</div>
</body>
</html>🔧 第五步：自定义魔法 CSS 类
我们可以通过自定义一些 CSS 类来个性化我们的魔法项目。打开 vite.config.js 并进行如下修改：
javascript
import { defineConfig } from 'vite'
import UnoCSS from 'unocss/vite'
import presetUno from '@unocss/preset-uno'
import presetAttributify from '@unocss/preset-attributify'
export default defineConfig({
plugins: [
UnoCSS({
presets: [
presetUno(),
presetAttributify(),
],
rules: [
['btn', { 'padding': '0.5rem 1rem', 'border-radius': '0.25rem', 'background-color': '#3490dc', 'color': '#fff' }],
['btn-primary', { 'background-color': '#1c3d5a' }],
],
}),
],
})接下来，我们在 index.html 中使用自定义的 CSS 类：
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>UnoCSS with Vite</title>
<script type="module" src="/main.js"></script>
</head>
<body>
<div class="text-center text-xl m-4 p-4">
<h1 class="text-2xl font-bold">Hello UnoCSS! 👋</h1>
<p class="text-lg text-gray-600">Welcome to the magical world of UnoCSS with Vite and pnpm! 🧙♂️</p>
<button class="btn btn-primary">
Custom Button! 🌟
</button>
</div>
</body>
</html>🏁 第六步：启动魔法项目
一切就绪！现在我们可以运行我们的项目看看魔法效果：
bash
pnpm run dev打开浏览器访问 http://localhost:3000，你应该能看到我们使用 UnoCSS 的漂亮页面。
🥳 总结
恭喜你！你已经成功地使用 Vite 和 UnoCSS 构建了一个魔法项目，并自定义了一些 CSS 类。希望你喜欢这个简单而有趣的冒险！继续和我一起探索 UnoCSS 的更多魔法特性吧！✨