在Vue 3（Vite）中引入和配置 UnoCSS

2023-09-16 11:43:00

使用 UnoCSS 构建动态且可重用的 Vue 样式

UnoCSS 是一种创新的 CSS-in-JS 框架，专为 Vue 3 项目而设计。它提供了一组预定义的实用程序类名，使用户能够快速构建可重用和可组合的样式。与其他 CSS-in-JS 框架不同，UnoCSS 专门针对 Vue 3 进行了优化，并提供了一种轻量级、灵活且可扩展的样式方法。

安装和配置 UnoCSS

在你的 Vue 3 项目中安装 UnoCSS 非常简单。使用 npm 或 Yarn 安装包：

npm install -D uno.css

或者：

yarn add -D uno.css

接下来，在你的 vite.config.js 文件中配置 UnoCSS：

// vite.config.js
import { defineConfig } from 'vite'
import Unocss from 'unocss/vite'
import presetUno from '@unocss/preset-uno'

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

引入 UnoCSS

在你的 Vue 组件中引入 UnoCSS，即可开始使用实用程序类名：

<script>
import { defineComponent } from 'vue'

export default defineComponent({
  setup() {
    return () => {
      return (
        <div class="p-4 bg-blue-500 text-white rounded-lg">
          This is a UnoCSS styled div.
        </div>
      )
    }
  },
})
</script>

预定义的实用程序

UnoCSS 提供了一系列预定义的实用程序类名，涵盖各种样式属性，包括：

间距：p-{size}，例如 p-4 设置 1rem 的内边距
背景：bg-{color}，例如 bg-blue-500 设置蓝色背景
文本颜色：text-{color}，例如 text-white 设置白色文本
圆角：rounded-{size}，例如 rounded-lg 设置 0.5rem 的圆角

这些类名可以组合起来创建更复杂的样式。

自定义实用程序

除了预定义的实用程序之外，UnoCSS 还允许你创建自己的自定义实用程序。例如，以下 CSS 代码创建了一个名为 my-button 的自定义实用程序，它将按钮样式设置为蓝色背景和白色文本：

@unocss/reset
@import 'uno.css'

@apply --my-button: bg-blue-500 text-white rounded-lg p-4;

然后，你可以在你的 Vue 组件中使用这个自定义实用程序：

<script>
import { defineComponent } from 'vue'

export default defineComponent({
  setup() {
    return () => {
      return (
        <button class="my-button">
          Click me!
        </button>
      )
    }
  },
})
</script>