UnoCSS + Vue3 + Vite入门_vite unocss

优点

• 增加开发维护效率：少打很多字符，也不用跳来跳去或者分屏去修改样式
• 复用性强，缩小项目体积
• 降低命名负担
• 不用担心更改影响到其他地方：只是更改了某个东西的class名，而不是更改class里的属性

引擎介绍

Unocss： Guide

用Vite安装和配置步骤：UnoCSS Vite Plugin

互动性文档：https://unocss.dev/interactive/（查询默认预设中的东西）

最好安装一个VS Code插件 ：UnoCSS（用来提醒并验证class）

开发服务器开启了之后，也可以直接查看生成的css： localhost:5173/__unocss

Vite配置示例

main.ts里需要引入css

// main.ts
import 'virtual:uno.css'

vite配置文件中

// vite.config.ts
import UnoCSS from 'unocss/vite'
import { defineConfig } from 'vite'
 
export default defineConfig({
  plugins: [
    UnoCSS({
        configFile: '../uno.config.ts'
      }),
  ],
})

新建一个uno配置文件（可以把rules/variants/shortcuts之类的直接放在里面，我这里是单独把自定义的配置分出了一个文件）

// uno.config.ts
import { defineConfig, presetUno, presetAttributify } from 'unocss'
import { myPreset } from './css-preset'
import presetRemToPx from '@unocss/preset-rem-to-px'
 
export default defineConfig({
  presets: [
    myPreset,
    presetUno(),
    presetAttributify(),
    presetRemToPx({ baseFontSize: 4 })
  ],
  // ...其他配置项
})

自定义方案的文件：

// css-preset.ts
import type { Preset } from 'unocss'
 
export const myPreset: Preset = {
  name: 'my-preset',
  rules: [
    [/^fs-(\d+)$/, ([, num]) => ({ 'font-size': `${num}px` })],
    [/^lh-(\d+)$/, ([, num]) => ({ 'line-height': `${num}px` })],
    [/^letter-([0-9.]+)$/, ([, num]) => ({ 'letter-spacing': `${num}em` })]
  ],
  variants: [
    // hover:xxx （已经存在于Uno预设中）
    (matcher) => {
      if (!matcher.startsWith('hover:')) {
        return matcher
      }
      return {
        matcher: matcher.slice(6),
        selector: s => `${s}:hover`
      }
    }
  ],
  shortcuts: {
    'button': 'select-none cursor-pointer text-center bg-blue c-white b-rd-2'
  }
}

Uno预设示例

更多的看这里： https://unocss.dev/interactive/

此处我用了rem to px的预设，所以后面不加单位的数字的话会直接被转化为px（如果不用这个预设，就需要用m-100px之类的）

margin

4项相同数值：m-100 等同于 margin: 100px

2项相同数值： mx-100 my-200 等同于 margin: 200px 100px

单项： mt-100 mr-200 mb-300 ml-400 等同于 margin: 100px 200px 300px 400px

负数： -mt-100或者mt--100

padding

和margin类似，使用p开头

text-align

text-center, text-start, text-end...

width/height

w-600, h-100...

min-w-100, max-w-100...

color

c-blue, c-cyan...

c-blue-400, c-sky-500...

更多预设颜色看https://unocss.dev/interactive/?s=guide:Colors

z-index

z-1, z-2, z-3...

border

4边: b-()...

2边：b-x-(), b-y-()...

单边：b-l-(), b-t-()...

宽度: b-3, b-x-3, b-l-3...

样式: b-dotted, b-dashed, b-solid, b-none...

颜色: b-black, b-blue...

position

absolute, relative, fixed...

important

在前面加上!

!h-600, !pt-15...

其他预设

文档：Uno preset

推荐：

1. Attributify: 可以分类，并且甚至能省去写class的功夫.. (下图）

2. Rem to px: 数字后面不加单位默认转为px。如果把baseFontSize设置为4后，不加单位的数字就等于px数值（原先默认为rem)

拿上面的div来分析，开发者工具中是这样的：

一些配置项

Rules

Rules

写自定义规则，比如：

rules: [
    [/^fs-(\d+)$/, ([, num]) => ({ 'font-size': `${num}px` })],
    [/^lh-(\d+)$/, ([, num]) => ({ 'line-height': `${num}px` })],
    [/^letter-([0-9.]+)$/, ([, num]) => ({ 'letter-spacing': `${num}em` })]
  ]

 Variants

Variants

可以设置:hover这样的样式(hover已经在默认预设里了)

也可以用sm:xxx, lg:xxx之类的设置不同media做不同尺寸的适配

（大概是这样的，截图来自Tailwind文档）

Shortcuts

Shortcuts

用来设置需要重复利用，并且有多种样式的class

shortcuts: {
    'button': 'select-none cursor-pointer text-center bg-blue c-white b-rd-2'
  }

Theme

Theme

可以给生成的class上再加上一道选项。相当于在theme里存储一套方案，然后在rules里面可以匹配到theme，再进行判定（看官网文档例子）

比较有用的例子，可以覆盖默认的media尺寸：

（只有这个例子是完全覆盖，而不是改写，官网文档特意提了这点）

theme: {
  // ...
  breakpoints: {
    sm: '320px',
    md: '640px',
  },
}

Layer

Layers

设置优先级，并排序

SafeList/ BlockList

Extracting

预加载/不加载某些class