admin/jdcProject_front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: 优化 UnoCSS 配置

Browse Source
This commit is contained in:
pany 2025-02-12 14:05:27 +08:00
parent a4d38a4307
commit 9acc5f156e
2 changed files with 11 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/pages/demo/unocss/index.vue
View File

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

15
uno.config.ts
View File

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