前端开发新趋势:UnoCSS快速入门


UnoCSS

一、UnoCSS简介

在这里插入图片描述

  • UnoCSS 是一个即时、按需的原子级 CSS 引擎。它专注于提供轻量化、高性能的 CSS 解决方案。
  • “Instant On-demand” 表示 UnoCSS 的加载和渲染速度非常快,可以立即进行使用。它不需要预先编译,使得样式可以在需要时动态地生成。
  • “Atomic CSS Engine” 表示 UnoCSS 使用原子级 CSS 样式的概念。原子级 CSS 是一种通过将样式属性定义为独立的类来构建页面的方法。每个类都只包含一项或几项样式属性,可以在组件中灵活地组合和应用这些类,以实现细粒度的样式控制。
  • UnoCSS 的目标是通过仅传递实际使用的样式属性,减小生成的 CSS 文件的体积。这样可以优化页面的加载速度,并减少不必要的网络传输和运行时的样式计算。
  • 总的来说,UnoCSS 是一个即时、按需的原子级 CSS 引擎,旨在提供快速、高性能的原子级 CSS 解决方案。

二、UnoCSS解决问题

  • UI 库 Bootstrap 很早就在提供大量原子化 CSS 工具类。不过在应用开发中,由于原子化 CSS 自身的劣势——原子类的编写缺少提示、原子类的定义使 CSS 最终产物膨胀、原子类的大量堆叠降低 html 的可读性,语义化 CSS 逐渐成为了主流,原子 CSS 慢慢被边缘化,成为一种辅助的手段。

  • 现代的原子化 CSS 方案——Tailwind CSSWindi CSSUnoCSS,之所以将原子化 CSS 方案再度推向高潮,是因为其解决了上述的三大痛点:

    • 它们都推出了 VSCode 插件,为编写原子类提供了充分的提示与自动补全。
    • 它们都在构建阶段扫描代码,能够按照代码中的实际使用情况生成工具类,解决了原子类使 CSS 产物膨胀问题。
    • 针对原子类堆叠降低可读性的问题,提供了 @apply 语法支持在 CSS 中对多个原子类进行合并,与语义化 CSS 实现了很好的配合。
  • UnoCSS 和 Tailwind CSS 有一些区别和特点:

    1. 设计理念: UnoCSS 的设计理念是提供一个即时、按需的原子级 CSS 引擎。它专注于轻量化和高性能,并使用原子类的方式来构建页面样式。相比之下,Tailwind CSS 提供了更全面和丰富的工具集,以便于快速开发和定制化。它使用了一组预定义的类,通过组合这些类来构建页面样式。
    2. 文件大小和加载性能: UnoCSS 生成的 CSS 文件相对较小,因为它仅包含实际使用的样式属性。这可以减少网络传输和运行时的样式计算,从而提高页面加载性能。而 Tailwind CSS 的 CSS 文件较大,因为它提供了大量的预定义类,以满足各种常见样式需求。
    3. 学习曲线和使用方式: UnoCSS 使用原子类的方式来定义样式,需要熟悉其命名规则和使用方法,特别适合熟悉原子类概念的开发者。相比之下,Tailwind CSS 的类命名直观且易于理解,上手较快。它也提供了丰富的文档和示例,帮助开发者更快地上手。
    4. 定制性和灵活性: Tailwind CSS 提供了大量的预定义类,使得样式定制和扩展非常方便。开发者可以通过配置文件自定义主题、添加新的类或修改现有类。UnoCSS 则更加注重即时、按需生成样式,定制性较弱。

在这里插入图片描述

  • UnoCSS 并非要替代 Tailwind CSS 而是从另一个角度使原子化CSS在业务中融合的更完美

按需生成

在这里插入图片描述

  • 传统的方式不仅会消耗不必要的资源(生成了但未使用),甚至有时更是无法满足你的需求,因为总会有部分需求无法包含在内。

在这里插入图片描述

  • 通过调换 “生成” 和 “扫描” 的顺序,“按需” 会为你节省浪费的计算开销和传输成本,同时可以灵活地实现预生成无法实现的动态需求。另外,这种方法可以同时在开发和生产中使用,提供了一致的开发体验,使得 HMR (Hot Module Replacement, 热更新) 更加高效。
  • Tailwind 的 API 和插件系统沿用了旧的思维方式进行设计,并不能适应新的按需方式。其核心工具是在生成器中锻造出来的,而且其定制化功能相当有限。(Tailwind 3.0也是按需引入啦)

性能

在这里插入图片描述

  • 从结果来看,UnoCSS 可以比 Tailwind 的 JIT 引擎快 200 倍!说实话,在按需生成的情况下,Windi 和 Tailwind JIT 都已经算是超快了,UnoCSS 的性能提升感知度可能没有那么高。然而,几乎为零的开销意味着你可以将 UnoCSS 整合到你现有的项目中,作为一个增量解决方案与其他框架一同协作,而不需要担心性能损耗。

  • Pure CSS icons

    • 纯css图标,使用 Iconify作为图标的数据源
  • Attributify Mode

    • 特有的属性模式
  • Variant Groups

    • 属性组的写法转换
  • Shortcuts

    • 快捷写法
  • Tagify

    • 标记
  • Web fonts

    • 网页字体
  • CDN Runtime

    • CDN运行时
  • Inspector

    • 检查

三、UnoCSS实践

在这里插入图片描述

# 安装unocss和三个预设,第一个是工具类预设,第二个是属性化模式支持,第三个是icon支持
npm i -D unocss @unocss/preset-uno @unocss/preset-attributify @unocss/preset-icons
# or
yarn add -D unocss @unocss/preset-uno @unocss/preset-attributify @unocss/preset-icons
# or
pnpm i -D unocss @unocss/preset-uno @unocss/preset-attributify @unocss/preset-icons
  • 安装完成

在这里插入图片描述

  • 修改vite.config.js文件:
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// 引入Unocss
import Unocss from 'unocss/vite';
import { presetUno, presetAttributify, presetIcons } from 'unocss'
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    Unocss({ // 使用Unocss
      presets: [
        presetUno(),
        presetAttributify(),
        presetIcons()],
    })
  ]
})
  • 修改main.js文件
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import 'uno.css' // focus code

createApp(App).mount('#app')
  • 在app.vue中编写代码
<script setup>
</script>

<template>
  <button class="bg-blue w-80 h-10 ml-10 m-1">
    button
  </button>
</template>

<style scoped>
</style>

在这里插入图片描述

  • 可以通过以下方式自定义一个简单的 UnoCSS 静态规则
// vite.config.js
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import Unocss from "unocss/vite";
import { presetUno, presetAttributify, presetIcons } from "unocss";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    Unocss({
      presets: [presetUno(), presetAttributify(), presetIcons()],
      rules:[
        ['m-1', { margin: '1px' }] // 这里可以自定义
      ]
    }),
  ],
});

在这里插入图片描述

  • 可以通过配置使用Webpack打包Unocss,这里就不详细展开啦

  • 使用风险:UnoCSS 仍处于实验阶段,但由于其精简的设计,生成的结果已经非常可靠了。需要注意的一点是,API 还没有最终定案,虽然我们会遵循 semver 的进行版本发布,但是还请为破坏性改动做好准备。


四、好文推荐

  • 8
    点赞
  • 26
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

会思想的苇草i

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值