什么是unocss？
unocss是一个即时的原子CSS引擎，它可以让你用简短的类名来控制元素的样式，而不需要写复杂的CSS代码。
Unocss： Guide
用Vite安装和配置步骤：UnoCSS Vite Plugin
互动性文档：https://unocss.dev/interactive/（查询默认预设中的东西）
unocss的优点
它可以让你快速地开发和原型设计，而不需要考虑CSS的细节。
它可以让你的CSS文件更小，因为它只生成你用到的工具类。
它可以让你的CSS更一致，因为它遵循一套预设的规则和变量。
它可以让你的CSS更灵活，因为它支持自定义工具类，变体，指令和图标。
它可以让你的CSS更易于维护，因为它避免了样式冲突和重复代码。
安装unocss
pnpm add -D unocss
// or
yarn add -D unocss
// or
npm install -D unocss
在打包工具配置文件中配置插件
vite配置
// vite.config.js
import UnoCSS from 'unocss/vite'
import { defineConfig } from 'vite'
export default defineConfig({
plugins: [
UnoCSS(),
],
})
创建一个`uno.config.js 配置文件
// uno.config.js
import { defineConfig, presetAttributify, presetUno } from 'unocss'
export default defineConfig({
presets: [
presetAttributify({ /* preset options */ }),
presetUno(),
],
})
在main.js中使用
// main.js
// vite如下配置
import 'virtual:uno.css'
安装vscode插件unocss
在settings.json中配置，作用是写css的时候带智能提示
"editor.quickSuggestions": {
"strings": true,
"other": true,
"comments": true,
}