UnoCSS快速上手UnoCSS UnoCSS‌是一个即时的原子CSS引擎，它允许开发者通过简短的类名来控制元素的样式，

UnoCSS

UnoCSS‌是一个即时的原子CSS引擎，它允许开发者通过简短的类名来控制元素的样式，而不需要编写复杂的CSS代码。

使用

安装

npm install -D unocss

pnpm add -D unocss

yarn add -D unocss

安装插件 （vite.config.ts）

import UnoCSS from 'unocss/vite'

export default defineConfig({
  plugins: [
    UnoCSS(),
  ],
})

根目录创建 uno.config.ts 文件

（uno.config.ts）

import { defineConfig } from 'unocss'

export default defineConfig({
  // 自定义规则
  rules: [
    // margin: 20  m-20
    [/^m-([\.\d]+)$/, ([_, num]) => ({ margin: `${num}px` })],
    [/^p-([.\d]+)$/, ([_, num]) => ({ padding: `${num}px` })],
  ],
  // 自定义快捷方式
  shortcuts: {
    "m-p-20": "m-20 p-20",
  }
})

注意

如果安装完unocss后自定义规则使用发现样式没有热更新，可以按ctrl+f5强刷新浏览器再次尝试。

如果还不可以就删除node_modules后重新npm i安装依赖，再次ctrl+f5强刷新浏览器即可。

同样自定义预设后不生效需要重新 npm run dev，然后再ctrl+f5。

定义自己的预设

创建文件unocss/my-preset.ts

（my-preset.ts）

import { Preset } from 'unocss'

export const myPreset: Preset = {
  name: 'my-preset',
  rules: [/* ... */],
  variants: [/* ... */],
  shortcuts: [/* ... */],
}

（uno.config.ts）

import { myPreset } from './my-preset'

export default defineConfig({
  presets: [
    myPreset, // 您自己的预设
  ],
})

更多vue相关插件及后台管理模板可访问vue admin reference，代码详情请访问github