Vue3 + Vite中使用unocss

什么是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,
  }

UnoCSS + Vue3 + Vite入门
在vue中使用unocss及基本使用方法