🎮 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 的更多魔法特性吧!✨

相关推荐
abigale0324 分钟前
webpack+vite前端构建工具 -11实战中的配置技巧
前端·webpack·node.js
专注API从业者44 分钟前
构建淘宝评论监控系统:API 接口开发与实时数据采集教程
大数据·前端·数据库·oracle
Joker`s smile1 小时前
Chrome安装老版本、不同版本,自制便携版本用于前端调试
前端·chrome
weixin_416639971 小时前
爬虫工程师Chrome开发者工具简单介绍
前端·chrome·爬虫
我是如子啊1 小时前
【解决“此扩展可能损坏”】Edge浏览器(chrome系列通杀))扩展损坏?一招保留数据快速修复
前端·chrome·edge
灵性花火1 小时前
Qt的前端和后端过于耦合(0/7)
开发语言·前端·qt
孤水寒月5 小时前
基于HTML的悬窗可拖动记事本
前端·css·html
祝余呀5 小时前
html初学者第一天
前端·html
耶啵奶膘7 小时前
uniapp+firstUI——上传视频组件fui-upload-video
前端·javascript·uni-app
视频砖家8 小时前
移动端Html5播放器按钮变小的问题解决方法
前端·javascript·viewport功能