Vue3+TypeScript学习笔记（三十二）

原子化的优缺点：

1. 减少css体积，提高复用程度
2. 不必操心麻烦的命名
3. 增加了记忆成本，新手可能需要经常翻看文档

接入unocss：

1. 安装：npm i -D unocss
2. 配置vite.config.js，配置项有preset（预设）、rules（css规则）、shortcuts（组合样式）等，以下为完整示例

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// 引入unocss
import unocss from 'unocss/vite'
// 引入unocss预设
import { presetIcons, presetAttributify, presetUno } from 'unocss'

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [
        vue(),
        unocss({
            // 第一个预设的作用是使用icons图标,第二个是无需class即可直接添加类名,第三个是使unocss具备tailwindcss等框架的类名
            presets: [presetIcons(), presetAttributify(), presetUno()],
            // 配置css规则,格式为二维数组
            rules: [
                // 配置静态css
                ['flex', { display: 'flex' }],
                ['red', { color: 'red' }],
                // 配置动态css
                [/^m-(\d+)$/, ([, d]) => ({ margin: `${Number(d) * 10}px` })],
            ],
      // 自定义组合样式
            shortcuts: {
                btn: 'flex red',
            },
        }),
    ],
})

1. 若要使用presetIcons，则还要安装对应的icon文件，官网地址：https://icones.js.org/，需要使用什么图标就安装对应图标的包

如图，这种情况就要使用pnpm add -D @iconify-json/ic，接下来在类名中使用即可，例如：

1. 在main.ts中引入uno.css，代码为import 'uno.css'

import { createApp } from 'vue'
// import './style.css'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import './css/index.css'
// 引入uno.css
import 'uno.css'

export const app = createApp(App)

app.use(ElementPlus)

app.mount('#app')

以下给出一份完整类名使用示例

<template>
    <!-- 静态的css,使标签具备对应样式 -->
    <div class="flex red">刺客</div>

    <!-- 动态的css,本例中相当于margin:100px -->
    <div class="m-10">刺客</div>

    <!-- 省略class的写法 -->
    <div flex red>刺客</div>
    <div m-10>刺客</div>

    <!-- 可以使用tailwindcss的类名 -->
    <div class="bg-pink-300">刺客</div>

    <!-- 使用图标 -->
    <div class="i-ic-baseline-alarm-on"></div>

    <!-- 组合样式 -->
    <div class="btn">刺客</div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
</script>

<style scoped></style>

效果图：