vue3 【提效】使用 CSS 框架 UnoCSS 实用教程

UnoCSS 是一个更快更轻的现代 CSS 框架，它提供了更多的自定义和更少的样板代码。以下是如何在 Vue 3 项目中使用 UnoCSS 的步骤和示例代码：

1. 安装 UnoCSS 和 Windi CSS：

npm install @unocss/core @unocss/preset-windicss unocss --save

2. 在项目中创建一个 uno.config.ts 文件来配置 UnoCSS：

// uno.config.ts
import { defineConfig } from 'unocss'
import { presetWind } from '@unocss/preset-windicss'
 
export default defineConfig({
  presets: [
    presetWind(),
  ],
})

3. 在 Vue 3 项目中设置 UnoCSS：

// main.js
import { createApp } from 'vue'
import App from './App.vue'
import UnoCSS from 'unocss/vite'
 
const app = createApp(App)
 
app.use(UnoCSS())
 
app.mount('#app')

4. 在组件中使用 UnoCSS 指令：

<template>
  <div v-uno="'text-center text-blue-500'">
    Hello UnoCSS!
  </div>
</template>

以上代码演示了如何在 Vue 3 项目中引入和配置 UnoCSS，并在组件模板中使用它来应用样式。UnoCSS 使用类似 Tailwind CSS 的实用性原则，通过指令直接在模板中声明样式，减少了样式的冗余和提高了项目的性能。