vite+ts+vue3 知识点（unoCss 原子化）

安装 unocss

npm add unocss

main.ts 配置

import "uno.css";

vite.config.ts 配置

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
// 引入 unocss 
import unoCss from "unocss/vite";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    // 配置 unocss 
    unoCss({
      // 手动配置的预设
      rules: [
        ["flex", { display: "flex" }],
        ["red", { color: "red" }],
      ],
      // 自定义组合样式
      shortcuts: {
        bgc: "flex red",
      },
    }),
  ],
});

在页面使用

<template>
  <div>
    <div class="flex red">哈哈</div>
  </div>
</template>

使用插件配置的预设

vite.config.ts 配置

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

import unoCss from "unocss/vite";
// 引入 图标预设 和 工具类预设
import { presetIcons, presetUno } from "unocss";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    // 配置 unocss 
    unoCss({
      presets: [presetIcons(), presetUno()],
    }),
  ],
});

presetIcons 需要下载 icon 包，网址 Icônes ，选一个你想用的 icon 包

安装 icon 包（ / 后面就是包名 ）

npm i -D @iconify-json/carbon

在页面直接复制 class 名使用

<div class="i-carbon-3d-curve-auto-vessels"></div>

presetUno 使用 （它集成了很多库，例如使用 tailwindCss）

<div class="text-indigo-300">哈哈</div>