在Vant4+Vue3+TypeScript的H5移动前端使用UnoCSS

伍华聪
364 阅读5分钟

UnoCSS 是一个 即时原子化 CSS（Atomic CSS / Utility-first CSS）引擎，类似于 Tailwind CSS 或 Windi CSS，但更轻量、灵活、性能高。本篇随笔结合项目代码介绍在Vant4+Vue3+TypeScript的H5移动前端使用UnoCSS。

UnoCSS 它的核心理念是：

  • 原子化 CSS：每一个 class 对应一条 CSS 规则，例如 p-4 就表示 padding: 1rem。
  • 按需生成：只有在 HTML / JS / Vue / React / Svelte 中使用到的类，UnoCSS 才会生成对应的 CSS，避免冗余。
  • 零配置可用：开箱即用，同时支持高度自定义。
  • 极速编译：使用静态分析和即时生成技术，CSS 构建速度非常快。

官网介绍： https://unocss.dev

1、UnoCSS 核心概念

原子类（Atomic Class）
每个 class 对应一个 CSS 属性，例如：

<div class="p-4 text-red-500 bg-gray-100"></div>

对应 CSS：

div { padding: 1rem; color: #f56565; background-color: #f7fafc; }

Preset（预设）

预定义的一套 class 规则，例如：

  • presetWind3 → 类似 Tailwind 风格
  • presetAttributify → 属性化写法 <div p="4" text="red-500"></div>
  • presetIcons → 图标类自动生成

Shortcuts（快捷类）

将多个 class 合并为一个，例如：

shortcuts: {
  btn: 'px-4 py-2 rounded bg-blue-500 text-white'
}

变体（Variants）

前缀用于状态或响应式：

  • hover:bg-blue-500 → 悬停时背景蓝色
  • md:flex → 中屏及以上显示 flex 布局
  • dark:text-white → 暗黑模式下字体白色

UnoCSS = 原子化 + 按需生成 + 极速编译 + 高度可定制的 CSS 工具库

2、如何掌握UnoCSS

要熟练使用 UnoCSS，你需要掌握它背后的 原子化 CSS 规则和标识符。其实，UnoCSS 并没有发明新的 CSS 属性，它是把 CSS 属性 + 值 + 状态/变体 封装成原子类（class），所以掌握 UnoCSS 的标识，核心就是理解 CSS 属性、常用缩写和变体。我给你总结一个体系：

核心 CSS 属性标识（必会）

这些几乎是每个 UnoCSS 项目都会用到的：

类名示例对应 CSS说明
p-4padding: 1rem内边距
pt-2padding-top: 0.5rem上内边距
m-3margin: 0.75rem外边距
mt-1margin-top: 0.25rem上外边距
w-24width: 6rem宽度
h-32height: 8rem高度
max-w-mdmax-width: 28rem最大宽度
min-h-screenmin-height: 100vh最小高度
text-smfont-size: 0.875rem字体大小
font-boldfont-weight: 700字重
text-centertext-align: center文本对齐
leading-6line-height: 1.5rem行高
tracking-wideletter-spacing: 0.05em字间距
text-red-500color: #f56565字体颜色
bg-gray-100background-color: #f7fafc背景色
borderborder-width: 1px边框
border-gray-300border-color: #d2d6dc边框颜色
roundedborder-radius: 0.25rem圆角
rounded-lgborder-radius: 0.5rem大圆角
shadow-mdbox-shadow: 0 4px 6px -1px rgba(...)阴影

核心思路：属性缩写 + 数值/颜色/尺寸 + 状态/变体

常用状态 / 伪类变体

UnoCSS 可以直接在 class 前加状态：

前缀说明示例
hover:鼠标悬停hover:bg-blue-500
focus:获焦focus:ring-2
active:激活active:scale-95
dark:夜间模式dark:text-white
sm: / md: / lg:响应式断点md:flex

可以组合：hover:md:bg-red-500 → 在中屏及以上，鼠标悬停时背景红色

属性缩写规则（UnoCSS vs Tailwind 很类似）

  • 尺寸：w-24, h-32, min-w-full
  • 间距：p-4, px-2, mt-1, my-6
  • 字体：text-sm, font-bold, leading-6
  • 颜色：text-red-500, bg-blue-200, border-gray-300
  • 边框：border, border-t, border-l-2, rounded, rounded-full
  • 阴影/动画：shadow, shadow-lg, animate-bounce
  • 布局：flex, grid, justify-center, items-start, gap-4
  • 定位：absolute, relative, top-4, left-0

高级标识（可选）

  • 图标：i-mdi-home（需要 presetIcons）
  • 属性风格：p="4" text="red-500"（需要 presetAttributify）
  • 自定义规则 / shortcuts：
shortcuts: {
  btn: 'px-4 py-2 rounded bg-blue-500 text-white'
}

使用：<button class="btn">点击</button>

3、在Vite+Vue3+TS+Vant4的H5移动前端使用UnoCSS

在Vite的移动前端项目中使用UnoCSS，和其他的操作一样，先安装在项目依赖库中

pnpm install -D unocss

一般我们还会同时使用它的预设图标处理，因此增加多两个类库。

pnpm install -D @unocss/preset-icons @iconify-json

在 uno.config.ts 中配置 presetIcons 插件。图标预设: unocss.dev/presets/ico…

presetIcons({
  extraProperties: {'display': 'inline-block',
    'vertical-align': 'middle',
    // ...
  },
})

iconify 生态的图标都可以使用，具体可以在这里查找 Iconify（icones.js.org/） - 本项目推荐图标库。它是统一的图标框架，超过 150 多个图标集，和 200,000 个开源矢量图标，并且会定期更新图标。您可以在 iconify 或者 icones 中看到所有的图标集。

在VSCode下使用预设的图标集合，如下所示。

image

在vite.config.ts 配置：

import Unocss from 'unocss/vite'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [
    Unocss() 
  ]
})

在 main.ts 中导入使用。

import 'virtual:uno.css'
import '@unocss/reset/tailwind-compat.css'

在界面代码中class里面使用即可

<div class="p-4 text-red-500 bg-gray-100 rounded-lg">
  Hello UnoCSS
</div>

在你的 uno.config.ts 或 uno.config.js 中进行配置UnoCSS 即可。

import { defineConfig, presetUno } from 'unocss'
import { presetWind3 } from 'unocss/preset-wind3'

export default defineConfig({
  presets: [
    presetWind3 (),
    // ...其他 preset
  ],
})

一般来说会比这个更多一些内容。

image

而一般VSCode 安装插件UnoCSS后，

UnoCSS - UnoCSS 提示插件

VSCode里面都有智能提示的，方便使用的同时也有助于了解UnoCSS的具体语法细节，如下我的项目所示。

image

生成的H5端界面效果如下所示

image 

消息详细界面中，也是统一使用了这样的样式处理方式。

<template>
  <div class="scroll-container">
    <page-header @click="goback" />
    <div class="m-2 border border-gray-300 rounded-[12px]">
      <div class="m-2 mb-2 font-bold">
        {{ article.title }}
      </div>
      <div class="m-2 flex flex-row text-xs text-gray">
        <div class="flex-grow-1">
          时间:{{ format(article.edittime) }}
        </div>
        <div class="mr-2">
          类别:{{ article.category }}
        </div>
      </div>
      <div class="m-2 mb-4 mt-2">
        <span class="line-height-loose" v-html="article.content" />
      </div>

      <van-space direction="vertical" fill class="m-4 mb-10 mt-4">
        <van-button round type="default" block @click="goback">
          返回
        </van-button>
      </van-space>
    </div>
  </div>
</template>

 下面是一些使用UnoCSS来构建界面显示的效果图，供参考。

 image   image     image

 移动端H5应用

 扫码进行了解 Vant4+Vue3+TypeScript 的移动前端。

avatar
文章
阅读
粉丝