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

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 魔法

现在我们已经配置好了 ViteUnoCSS,可以在我们的项目中开始施展魔法了。打开 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 的漂亮页面。

🥳 总结

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

相关推荐
岁月宁静5 小时前
深度定制:在 Vue 3.5 应用中集成流式 AI 写作助手的实践
前端·vue.js·人工智能
心易行者5 小时前
10天!前端用coze,后端用Trae IDE+Claude Code从0开始构建到平台上线
前端
saadiya~6 小时前
ECharts 实时数据平滑更新实践(含 WebSocket 模拟)
前端·javascript·echarts
fruge6 小时前
前端三驾马车(HTML/CSS/JS)核心概念深度解析
前端·css·html
百锦再6 小时前
Vue Scoped样式混淆问题详解与解决方案
java·前端·javascript·数据库·vue.js·学习·.net
烛阴6 小时前
Lua 模块的完整入门指南
前端·lua
浪里行舟7 小时前
国产OCR双雄对决?PaddleOCR-VL与DeepSeek-OCR全面解析
前端·后端
znhy@1237 小时前
CSS易忘属性
前端·css
瓜瓜怪兽亚7 小时前
前端基础知识---Ajax
前端·javascript·ajax
AI智能研究院7 小时前
(四)从零学 React Props:数据传递 + 实战案例 + 避坑指南
前端·javascript·react.js