vue3.2 之使用 css原子化

1：vue3.2 之使用 css原子化 基础使用

• 安装：npm i -D unocss

配置unocss vite.config.ts

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

export default defineConfig({
  plugins: [
    vue(),
    Unocss({
      // 使用Unocss
      presets: [presetUno(), presetAttributify(), presetIcons()]
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

main.ts

import 'uno.css'

使用unocss

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

• 效果
  

2：unocss原子化 使用相关规则配置

配置unocss vite.config.ts

• 配置 flex布局 ['flex', { display: 'flex' }],
• 配置margin的大小需要 以 多少倍数 放大 [/^m-(\d+)$/, ([, d]) => ({ margin: ${Number(d) * 10}px })],
• 配置公告的样式 ['title', { color: '#ff0' }]
• 设置居中定位

  	 ['p-r', { position: 'relative' }],
          [
            'p-c',
            {
              position: 'absolute',
              top: '50%',
              left: '50%',
              transform: 'translate(-50%, -50%)'
            }
          ]
  

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

export default defineConfig({
  plugins: [
    vue(),
    Unocss({
      // 使用Unocss
      presets: [presetUno(), presetAttributify(), presetIcons()],
      // 设置unocss相关的规则
      rules: [
        [/^m-(\d+)$/, ([, d]) => ({ margin: `${Number(d) * 10}px` })],
        ['flex', { display: 'flex' }],
        ['title', { color: '#ff0' }],
        ['p-r', { position: 'relative' }],
        [
          'p-c',
          {
            position: 'absolute',
            top: '50%',
            left: '50%',
            transform: 'translate(-50%, -50%)'
          }
        ]
      ]
    })
  ],
})

使用unocss

<template>
  <div>
    <div>
      <div class="flex text-18">
        <div class="title">1</div>
        <div>2</div>
        <div>3</div>
      </div>
    </div>
    <div class="p-r w-200px h-200px bg">
      <div class="p-c">123</div>
    </div>
    <div class="m-10">分界线</div>
  </div>
</template>

效果

• flex布局 与 text文本的设置、公告样式的设置
  
• marging的设置
  
• 居中定位
  

3：unocss原子化 设置文本相关、宽高

code

• 字体大小、字体颜色、背景、字体粗、宽、高

    <div>
      <div class="text-20px color-pink bg-yellow fw-900 w-200px h-50px lh-50px">
        我是unocss
      </div>
    </div>

4：unocss原子化 自定义 组合样式

vite.config.ts

    Unocss({
      // 使用Unocss
      presets: [presetUno(), presetAttributify(), presetIcons()],
      // 设置unocss相关的规则
      rules: [
        [/^m-(\d+)$/, ([, d]) => ({ margin: `${Number(d) * 10}px` })],
        ['flex', { display: 'flex' }],
        ['title', { color: '#ff0' }],
        ['p-r', { position: 'relative' }],
        [
          'p-c',
          {
            position: 'absolute',
            top: '50%',
            left: '50%',
            transform: 'translate(-50%, -50%)'
          }
        ]
      ],
      shortcuts: {
        btn: 'title flex'
      }
    })

使用

<button class="btn">按钮</button>

5：unocss原子化 使用字体图标

• npm i -D @iconify-json/ic
• icons网站

icons网站的使用

使用

    <div class="i-ic-baseline-backspace text-20px bg-pink" />
    <div class="i-ic-baseline-arrow-circle-up text-20px bg-pink" />
    <div class="i-ic-baseline-arrow-circle-right text-20px bg-pink color-fff" />