likes
comments
collection
share

Vue3+Vite4”食用“UnoCSS

作者站长头像
站长
· 阅读数 12

Vue3+Vite4”食用“UnoCSS

UnoCSS 是什么?

CSS原子化

在前端开发中，CSS原子化（Atomic CSS）是一种设计和编写CSS样式的方法论。它的核心思想是将样式属性拆分为独立的、可重用的类名，每个类名仅定义一个样式属性。

优点

原子化CSS的好处之一是提供了高度的可重用性。通过将样式属性拆分为独立的类名，我们可以根据需要组合这些类名来构建所需的样式。这种模块化的方法使得样式的管理和维护更加简单，也更容易实现样式的复用。例如，如果我们有一个名为.text-center的类，它定义了文本居中对齐的样式，我们可以在需要时将其应用于任何元素。

原子化CSS还有助于减小样式表的大小。由于每个类名只定义一个样式属性，因此样式表中的类名数量相对较多，但每个类名的定义相对较短。这可以帮助减小样式表的大小，从而加快加载时间和提升性能。

另一个原子化CSS的优势是可预测性。由于每个类名只定义一个样式属性，类名与样式的关联非常明确。这使得在查看HTML元素的类名时，可以直观地了解它们应用的样式。这也使得在不破坏其他样式的情况下，可以更方便地添加或移除特定样式

缺点

原子化CSS并不适用于所有情况。在某些情况下，它可能会导致样式的冗余和维护的困难。如果我们有大量的独立样式属性需要定义，使用原子化CSS可能会导致类名数量爆炸，并且难以管理。因此，在使用原子化CSS时，需要在可重用性和可维护性之间做出权衡，并根据具体情况做出决策。

介绍 UnoCSS

在 UnoCSS 的官网首页，已经为我们展示了它的优点👇

  1. 没有核心实用程序。所有功能均通过预设提供。
  2. 瞬间。无需解析、无需AST、无需扫描。它比Windi CSS或TailWind JIT快5倍。
  3. 轻量级。零deps和浏览器友好：~6kb min+brotli。
  4. 丰富的集成。一流的Vite、Webpack、PostCSS、CLI、VS Code、ESLint等支持。
  5. 快捷方式。动态地对实用工具进行别名或分组。
  6. 属性模式。将实用工具分组放置在属性中。
  7. 纯CSS图标。使用单个类名作为任意图标。
  8. 变体组。使用常见前缀的快捷方式来组合实用工具。
  9. CSS 指令。使用 @apply 指令在 CSS 中重用实用工具。
  10. 编译模式。在构建时将多个类合成为一个类。
  11. 检查器。交互式地进行检查和调试。
  12. CDN 运行时构建。使用一行 CDN 引入代码即可使用 UnoCSS。

如上已经说的很全面了，UnoCSS 的设计理念是简洁易用，提供了一套直观和易于记忆的类名，使得开发人员能够快速编写和理解样式代码。它遵循类似于 Tailwind CSS 的风格，使用直观的命名规则来描述样式的作用。而且 Antfu 大佬也是 Tailwind 的作者之一。

上面巴拉巴拉了一大堆，接下来就直接食用吧。

食用 UnoCSS

使用 Vite 初始化一个 Vue3 项目

当然首先确保已经安装了Node，并且按照目前 Vite 需要的 Node 版本，Vite 不再支持 Node 12 / 13 / 15，因为上述版本已经进入了 EOL 阶段。现在你必须使用 Node 14.18+ / 16+ 版本。有了环境，就要开始写代码了～

创建一个 Vue3 项目

这里我推荐使用 pnpm 作为包管理器，使用 npm 或者 yarn 也是一样的。

npm create vite@latest
// or
yarn create vite
// or
pnpm create vite

随后在终端会有一些选项👇

Vue3+Vite4”食用“UnoCSS ### 安装依赖 `cd UnoCSSDemo`进入项目文件夹，然后`pnpm install`下载依赖。👇 Vue3+Vite4”食用“UnoCSS

接下来进入 Vscode，添加对 UnoCss 的支持。

pnpm add -D unocss
// or
yarn add -D unocss
// or
npm install -D unocss

创建配置文件

在项目根目录下修改vite.config.js文件，添加 UnoCSS 插件到 Vite 中。

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import UnoCSS from 'unocss/vite'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue(),UnoCSS()],
})

在项目根目录下创建uno.config.js文件。写入以下内容👇

// uno.config.js
import { defineConfig, presetUno } from 'unocss'

export default defineConfig({
  presets: [
    presetUno(), // 添加 UnoCSS 的默认样式预设
  ],
})

在App.vue中写入以下内容进行测试是否安装 UnoCSS 并能够成功使用👇

<script setup>
</script>

<template>
  <div class="text-center">
    Hello World!
  </div>
</template>

在main.js入口文件写入以下内容👇

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import 'virtual:uno.css'

createApp(App).mount('#app')

随后 pnpm run dev 启动项目，在控制台打开http://127.0.0.1:5173 即可查看成功使用了 UnoCSS 的样式页面。

官方还给开了个后门，打开http://localhost:5173/__unocss#/，即可查看具体样式编译后的文件👇

Vue3+Vite4”食用“UnoCSS

我们可以看到text-red-500最终的 Css 代码是什么样子的。

我们也可以在 unocss.dev/interactive 去查看样式规则。就例如刚刚的代码👇

Vue3+Vite4”食用“UnoCSS

总结

很多人可能根本没使用过原子化 CSS，我也是最近写一个新的项目了解到这个概念所以想尝试一下，结果发现确实还挺有意思的。例如像 Tailwind Css，在大部分以 Vue 为基础框架的项目中，其实都会安装类似 Element UI 或者 Ant Design 的 UI 框架，在 template 中直接把UI框架封装好的组件拿过来用就好了，真正写 css 的地方可能比较少，但是也不一定。这个时候去使用 UnoCSS，把 div 和 css 绑定到一起，见名知意。有点像把样式写到 style 里面一样，其实是很方便的。例如常见的写一个 flex 布局给某一个 div👇。

<div class="flex flex-row flex-justify-center flex-items-center">xxx</div>

会被翻译成👇

.flex {
  display: flex;
}
.flex-row {
  flex-direction: row;
}
.flex-justify-center {
  justify-content: center;
}
.flex-items-center {
  align-items: center;
}

上面所说的只是 UnoCS 的最基础的功能。在上面介绍到的优点中，例如纯CSS图标,CSS 指令等也是非常实用且方便的技巧。如果有时间的话，会继续更新这部分的内容～