Vue3 + TypeScript 接入 UnoCSS 及常用原子类

一、简介

UnoCSS 是一个高性能且极具灵活性的即时原子化 CSS 引擎，核心在于其灵活性，所有 CSS 工具类均通过预设提供。在 Vue3 + TypeScript 项目中接入 UnoCSS，可以显著提高开发效率和代码可维护性。

在项目中安装 UnoCSS：

bash

npm install -D unocss

在 vite.config.ts 中引入 UnoCSS 插件：

typescript

import UnoCSS from "unocss/vite";
import { defineConfig } from "vite";

export default defineConfig({
  plugins: [UnoCSS()],
});

创建 uno.config.ts 文件：

typescript

import { defineConfig } from "unocss";

export default defineConfig({
  // 配置选项，如预设、规则等
});

在 main.ts 中引入 UnoCSS：

typescript

import "virtual:uno.css";