unocss原子化

接入unocss

npm i -D unocss

vite.config.js

import unocss from 'unocss/vite'

export default defineConfig({
  plugins: [
    vue(),
    vueJsx(),
    unoCss({
      rules: [
        ["flex", { display: "flex" }],
        ["red", { color: "red" }],
        [/^m-(\d+)$/, ([, d]) => ({ margin: `${Number(d) * 10}px` })],
      ],
      shortcuts:{
        cike:['flex','red']
      }
    }),
  ],
})

main.ts

import 'uno.css'

App.vue

可全局直接使用即可

  <div class="flex red m-1"><p>p</p></div>
  <div class="cike"></div>

unocss预设

前往官网

import {presetIcons,presetAttributify,presetUno} from 'unocss' //引入
export default defineConfig({
  plugins: [
    vue(),
    vueJsx(),
    unoCss({
      presets:[presetIcons(),presetAttributify(),presetUno()],//引入
      rules: [
        ["flex", { display: "flex" }],
        ["red", { color: "red" }],
        [/^m-(\d+)$/, ([, d]) => ({ margin: `${Number(d) * 10}px` })],
      ],
      shortcuts:{
        cike:['flex','red']
      }
    }),
  ],