UnoCSS 是一个高效的原子 CSS 引擎，它提供了一种现代化的方式来管理和应用样式，通过其轻量化、模块化和可扩展的特性，显著提升了项目的开发效率和性能表现。下面我将分别介绍在 Vue 2 和 Vue 3 项目中集成 UnoCSS 的方法~
记得安装对应unocss插件，更加方便开发~

1.vue2+vue-cli使用unocss

1.安装依赖

执行命令：

npm install @unocss/webpack --save-dev
npm install unocss --save-dev

我的安装的版本是：

  "devDependencies": {
    "unocss": "^0.46.5",
    "@unocss/webpack": "^0.46.5"
   }

2.配置vue.config.js

const unocss = require('@unocss/webpack').default
module.exports ={
  configureWebpack: {
    plugins: [
      new unocss()
    ],
    css: {
     extract: {
     	filename: '[name].[hash:9].css',
     }
  	}
  }
}

3.根目录增加unocss.config.js

在根目录中添加 unocss.config.js 文件是为了提供更细粒度的配置选项给 @unocss/webpack 插件。通过这个配置文件，你可以定制化 UnoCSS 的行为，例如定义主题样式、配置插件、启用或禁用特定功能等。

在 Vue CLI 项目中，默认情况下，你应该在根目录创建一个 unocss.config.js 文件来配置 UnoCSS。这个文件会被 @unocss/webpack 插件自动识别并加载。具体配置请查阅官网文档。

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

export default defineConfig({
  rules: [
    [/^line-height-(.+)$/, ([, d]) => ({ 'line-height': `${+d / 4}rem` })],
  ],
  shortcuts: [
  ],
  presets: [
    presetUno(),
    presetAttributify(),
  ],
  transformers: [
    transformerDirectives(),
    // transformerVariantGroup(),
  ],
})

4.main.js里引入样式

import 'uno.css'

5.运行项目 测试是否生效

<div class="text-red">test日落</div>

npm run serve

ps:如果不生效 重启下vscode试试

2.vue3+vite使用unocss

1.安装依赖

执行命令：

npm install unocss

我的安装的版本是：

  "devDependencies": {
    "unocss": "^0.61.0"
   }

2.配置vite.config.js

import UnoCSS from 'unocss/vite'
module.exports ={
  configureWebpack: {
    plugins: [
      UnoCSS()
    ]
  }
}

3.main.js里引入样式

import 'uno.css'

4.页面中使用

<span class="text-red bg-red">测试</span>