feat: 引入 UnoCSS

.vscode/extensions.json

@@ -2,6 +2,7 @@
   "recommendations": [
     "vue.volar",
     "editorconfig.editorconfig",
-    "dbaeumer.vscode-eslint"
+    "dbaeumer.vscode-eslint",
+    "antfu.unocss"
   ]
 }

README.md

@@ -129,6 +129,8 @@ pnpm lint
 
 **Axios**：发送网络请求（已封装好）
 
+**UnoCSS**：具有高性能且极具灵活性的即时原子化 CSS 引擎
+
 ## License
 
 [MIT](./LICENSE) License © 2025-PRESENT [pany](https://github.com/pany-ang)

package.json

@@ -19,6 +19,7 @@
     "lodash-es": "4.17.21",
     "normalize.css": "8.0.1",
     "pinia": "2.3.1",
+    "unocss": "65.4.3",
     "vant": "4.9.17",
     "vue": "3.5.13",
     "vue-router": "4.5.0"

src/main.ts

@@ -7,6 +7,7 @@ import App from "@/App.vue"
 // css
 import "normalize.css"
 import "@@/assets/styles/index.css"
+import "virtual:uno.css"
 
 // 创建应用实例
 const app = createApp(App)

src/pages/index.vue

@@ -1,8 +1,20 @@
 <script lang="ts" setup></script>
 
 <template>
-  <div>
-    首页
+  <div uno-padding-20 h-full text-center flex select-none all:transition-400>
+    <div ma>
+      <div text-5xl fw100 animate-bounce-alt animate-count-infinite animate-duration-1s>
+        UnoCSS
+      </div>
+      <div op30 text-lg fw300 m1 dark:op60>
+        该页面是一个 UnoCSS 的使用案例，其他页面依旧采用 Scss
+      </div>
+      <div m2 uno-flex-x-center text-lg op30 hover="op80" dark:op60 dark:hover="op80">
+        <a href="https://antfu.me/posts/reimagine-atomic-css-zh" target="_blank">
+          推荐阅读：重新构想原子化 CSS
+        </a>
+      </div>
+    </div>
   </div>
 </template>
 

uno.config.ts

@@ -0,0 +1,22 @@
+import { defineConfig, presetAttributify, presetUno } from "unocss"
+
+export default defineConfig({
+  // 预设
+  presets: [
+    // 属性化模式 & 无值的属性模式
+    presetAttributify(),
+    // 默认预设
+    presetUno({
+      important: "#app"
+    })
+  ],
+  // 自定义规则
+  rules: [["uno-padding-20", { padding: "20px" }]],
+  // 自定义快捷方式
+  shortcuts: {
+    "uno-wh-full": "w-full h-full",
+    "uno-flex-center": "flex justify-center items-center",
+    "uno-flex-x-center": "flex justify-center",
+    "uno-flex-y-center": "flex items-center"
+  }
+})

vite.config.ts

@@ -1,6 +1,7 @@
 import { resolve } from "node:path"
 import { VantResolver } from "@vant/auto-import-resolver"
 import vue from "@vitejs/plugin-vue"
+import UnoCSS from "unocss/vite"
 import AutoImport from "unplugin-auto-import/vite"
 import Components from "unplugin-vue-components/vite"
 import { defineConfig, loadEnv } from "vite"
@@ -85,6 +86,8 @@ export default defineConfig(({ mode }) => {
     // 插件配置
     plugins: [
       vue(),
+      // 原子化 CSS
+      UnoCSS(),
       // 自动按需导入 API
       AutoImport({
         imports: ["vue", "vue-router", "pinia"],