unocss 安装使用

1.安装

pnpm i -D unocss

2.引入

在项目根目录新建一个文件uno.config.ts

import { defineConfig, presetAttributify, presetIcons, presetUno } from 'unocss'

export default defineConfig({
  presets: [presetUno(), presetAttributify(), presetIcons()],
  shortcuts: { //自定义组合
    'wh-full': 'w-full h-full',
    'aa': 'bg-blue w-80 h-20 ml-10 m-1'
  },
  rules: [ //自定义规则
    ['hh', { border: '1px solid red' }]
  ],
})

到vite.config.ts文件内加上

// 引入Unocss
import Unocss from 'unocss/vite';

//在配置plugins里面加上Unocss()
plugins: [
	vue(),
	vueJsx(),
	Unocss()
]

3.使用

<template>
  <div>test</div>
  <button class="hh">button</button>
</template>
<script setup lang="ts">
defineOptions({
  name: 'unocss'
});
</script>
<style></style>