UnoCSS

官网：https://unocss.dev/

优点

  1. 没有核心实用程序。所有功能均通过预设提供。
  2. 瞬间。无需解析、无需AST、无需扫描。它比Wind 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。

使用 Vite 初始化一个 Vue3 项目

推荐使用 pnpm 作为包管理器

pnpm create vite

添加对 UnoCss 的支持

pnpm add -D unocss

创建配置文件

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

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

export default defineConfig({
  plugins: [
    UnoCSS(),
  ],
})

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

// uno.config.ts
import { defineConfig } from 'unocss'

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

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

<script setup>
</script>

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

在main.ts入口文件添加

import 'virtual:uno.css'