Unocss(原子化css) 使用及vue3 + vite + ts讲解

pnpm create vite unocss-demo -- --template vue-ts

npm init vite@latest my-vue-app -- --template vue

yarn create vite my-vue-app --template vue

pnpm i -D unocss @unocss/preset-uno @unocss/preset-attributify @unocss/preset-icons

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// 引入Unocss
import Unocss from 'unocss/vite';
import { presetUno, presetAttributify, presetIcons } from 'unocss'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    Unocss({ // 使用Unocss
      presets: [
        presetUno(),
        presetAttributify(),
        presetIcons()],
    })
  ]
})

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
// 导入Unocss
import 'uno.css'
createApp(App).mount('#app')

<div class="text-25px text-#ff6700 bg-#ccc">你好Unocss</div>

text-25px: font-size:25px
text-#ff6700: color: #ff6700
bg-#ccc: background: #ccc

使用class类名来描述样式,省去了单独写style的样式

pnpm i -D @iconify-json/logos

<div class="i-logos-atomic-icon w-50px h-50px"></div>

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import Unocss from 'unocss/vite';
import { presetUno, presetAttributify, presetIcons } from 'unocss'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    Unocss({
      presets: [
        presetUno(),
        presetAttributify(),
        presetIcons()
      ],
      rules: [ // 在这个可以增加预设规则, 也可以使用正则表达式
        [
          'p-c', // 使用时只需要写 p-c 即可应用该组样式
          {
            position: 'absolute',
            top: '50%',
            left: '50%',
            transform: `translate(-50%, -50%)`
          }
        ],
        [/^m-(\d+)$/, ([, d]) => ({ margin: `${d / 4}rem` })],
      ]
    })
  ]
})