likes
comments
collection
share

🎮 Vite + UnoCSS 新手如何自定义个性化的Class

作者站长头像
站长
· 阅读数 28

Hello 大家好，今天我们将一起踏上冒险之旅，学习如何使用 Vite 配置 UnoCSS，并添加个性化的 Class 来美化我们的页面。准备好了吗？让我们开始吧！

🏰 第一步：初始化Unocss项目

首先，我们需要创建一个新的 Vite 项目。如果你还没有安装 pnpm，请先施放这个魔法：

npm install -g pnpm

接下来，我们创建一个新的 Vite 项目：

pnpm create vite my-uno-project --template vanilla

进入项目目录：

cd my-uno-project

⚗️ 第二步：安装魔法依赖

现在我们需要安装 UnoCSS 和一些必要的插件：

pnpm add unocss @unocss/preset-uno @unocss/preset-attributify

🛠 第三步：配置 Vite 魔法书

在项目根目录下创建一个 vite.config.js 文件，并添加以下内容：

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 文件，并添加一些简单的样式：

<!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 并进行如下修改：

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 类：

<!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>

🏁 第六步：启动魔法项目

一切就绪！现在我们可以运行我们的项目看看魔法效果：

pnpm run dev

打开浏览器访问 http://localhost:3000，你应该能看到我们使用 UnoCSS 的漂亮页面。

🥳 总结

恭喜你！你已经成功地使用 Vite 和 UnoCSS 构建了一个魔法项目，并自定义了一些 CSS 类。希望你喜欢这个简单而有趣的冒险！继续和我一起探索 UnoCSS 的更多魔法特性吧！✨

转载自:https://juejin.cn/post/7376563996424110114
评论
请登录