UnoCSS快速入门

news2024/7/6 18:09:40

UnoCSS快速入门

UnoCSS
- 一、UnoCSS简介
- 二、UnoCSS解决问题
- 三、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 CSS、Windi CSS、UnoCSS，之所以将原子化 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实践

Integrations (unocss.dev)
首先创建好项目，然后安装unocss(顺便安装好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' }] // 这里可以自定义
      ]
    }),
  ],
});