在vue3 + vite中引入unocss，安装配置unocss

1. 安装

npm install -D unocss

2. 引入

（1）创建plugins文件夹，在此下面随便创建一个ts文件 并引入

import 'uno.css';

（2）在main.ts中引入 上面创建的文件

import './plugins/assets';

（3）或者 可以直接在main.ts 中引入

import 'virtual:uno.css';

3. 在vite.config.ts中引入

import Unocss from 'unocss/vite';

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

4. 创建 unocss.config.ts

import {
  transformerVariantGroup,
  transformerDirectives,
  presetAttributify,
  defineConfig,
  presetMini,
  presetUno,
} from 'unocss';

// https://github.com/unocss/unocss#readme
export default defineConfig({
  presets: [
    presetMini({ dark: 'class' }),
    // https://unocss.dev/presets/attributify#properties-conflicts
    presetAttributify({ prefix: 'un-', prefixedOnly: true }),
    presetUno(),
  ],
  transformers: [transformerDirectives(), transformerVariantGroup()],
  shortcuts: {
    'wh-full': 'w-full h-full',
    'flex-ac': 'flex justify-around items-center',
    'flex-bc': 'flex justify-between items-center',
  },
  theme: {},
});

5. vscode代码提示配置

（1）在vscode应用市场中搜索Unocss，或者点击https://marketplace.visualstudio.com/items?itemName=antfu.unocss进行安装此拓展。

代码提示效果：

然后你的项目就可以正常使用 unocss 啦~