vue3使用unocss

安装

pnpm add unocss

项目根目录创建 uno.config.ts

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

export default defineConfig({
    rules: [
        ['m-1', { margin: '1px' }],
    ],
})

vite.config.ts中使用引入unocss

//...
import UnoCss from "unocss/vite";
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    UnoCss(),
  ],
 //...

无需手动引入uno.config.ts,vite工具会自动查找此配置文件

main.ts中引入

import 'uno.css'

项目中使用，就可以生效了

<h1 class="m-1">This is an about page</h1>

uno.config.ts引入uno的一些预设

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

export default defineConfig({
    rules: [
        ['m-1', { margin: '1px' }],
    ],
    shortcuts: { 'wh-full': 'w-full h-full' },
    presets: [
        presetAttributify(),
        presetUno()
    ],
})