Una UI配置完全指南nuxt.config与app.config的12个关键配置项【免费下载链接】una-uiThe Atomic UI framework for Nuxt, powered by Unocss engine 项目地址: https://gitcode.com/gh_mirrors/un/una-ui想要快速上手Una UI配置让这套基于 Unocss 引擎的原子化 UI 框架真正长成你项目的模样本文为你梳理 nuxt.config 与 app.config 中的 12 个关键配置项从组件前缀、全局注册到主色、圆角、侧边栏宽度全部一次讲透照着抄就能用。Una UI 是一款专为 Nuxt 打造的原子化 UI 框架核心引擎是 Unocss。它默认帮你集成了 Unocss、Color Mode深色模式、VueUse、Reka UI 等必备能力你几乎不用做额外安装只需在配置文件里点菜即可。配置分两大入口nuxt.config.ts管模块行为app.config.ts管主题与组件细节下面逐一拆解。一、nuxt.config 配置控制模块行为的 3 个关键项在nuxt.config.ts中通过una字段传入模块选项共 3 个核心配置项。对应源码见 module.ts。配置项默认值类型作用prefixNstring组件名前缀themeabletrueboolean是否启用主题化globaltrueboolean是否全局注册组件1. prefix自定义组件前缀所有 Una UI 组件默认以N开头比如NButton、NCard。想避免与现有组件库冲突改成自己的前缀即可例如改成U后组件就变成UButton。2. themeable一键开关主题能力设为true时会自动加载主题相关插件theme.client.ts 与 theme.server.ts支持运行时换色。不需要主题功能时可关掉减少一点运行时开销。3. global全局注册还是按需导入默认全局注册所有组件开箱即用。若项目组件较多想精简可设false然后手动导入import { NButton } from una-ui/nuxt。// nuxt.config.ts export default defineNuxtConfig({ modules: [una-ui/nuxt], una: { prefix: N, // 组件前缀 themeable: true, // 启用主题化 global: true, // 全局注册组件 }, })二、app.config 配置掌控主题与细节的 9 个关键项主题类的配置统一放在app.config.ts的una字段下运行时可被useUnaSettings()读取并动态修改见 useUnaSettings.ts。4. primary设置主色调所有组件的主色默认是yellow黄改一个词就能让全站换肤支持 Tailwind 风格的全部色板。例如改成blue、violet或自定义色值。5. gray设置中性色默认stone用于边框、背景、文字等中性元素。喜欢偏冷或偏暖的灰可以换成slate、neutral、zinc等。6. radius统一圆角大小默认0.5控制所有组件的圆角风格。想要更圆润的卡片与按钮调到0.75甚至1即可整个 UI 气质立刻不同。7. fontSize根字号基准默认16px作为全局字号基准影响所有text-*工具类的计算。8. fontSizes字号切换预设列表这是一个预设数组供主题切换器ThemeSwitcher在下拉菜单中切换字号使用。替换它即可自定义可选字号档位// app.config.ts export default defineAppConfig({ una: { primary: yellow, gray: stone, radius: 0.5, fontSize: 16, fontSizes: [ { label: 小, value: 14 }, { label: 默认, value: 16 }, { label: 大, value: 18 }, ], }, })9. sidebar.cookieName侧边栏状态存储名侧边栏的开合状态会持久化到 cookie默认名为sidebar:state。多侧边栏场景建议各自命名避免互相覆盖。10. sidebar.cookieMaxAge状态有效期默认604800秒7 天。想一次设置、长期记住把它调大即可。默认值与侧边栏逻辑对应源码见 useSidebar.ts。11. sidebar 宽度三件套width / widthMobile / widthIconwidth展开宽度默认16remwidthMobile移动端宽度默认18remwidthIcon折叠为图标栏时的宽度默认3rem12. sidebar.keyboardShortcut折叠快捷键默认b即按下⌘/Ctrl B快速折叠/展开侧边栏。觉得顺手也可以换成.等其他按键。完整的 app.config 参考写法export default defineAppConfig({ una: { primary: violet, gray: slate, radius: 0.75, sidebar: { keyboardShortcut: ., width: 20rem, }, }, })三、延伸uno.config.ts 里还能玩出什么花除了上述 12 项Una UI 还提供了defaultConfig()帮助函数让你在uno.config.ts中扩展 Unocss 配置并覆盖组件样式官方文档见 una-config.md。import { defaultConfig } from una-ui/nuxt/una.config export default defaultConfig({ shortcuts: [ // 静态组合btn-custom: py-2 px-4 bg-blue-500 text-white rounded, // 动态正则[/^gradient-(\w)$/, ([, c]) bg-gradient-to-r from-${c}-500 to-${c}-700], ], })静态 shortcuts 适合定义常用组合类动态 shortcuts 则能用正则批量生成工具类是二次定制组件外观的利器。底层预设还自带primary、gray、error、success等语义色板见 colors.ts扩展配色非常方便。四、配置速查一张表记住全部默认值配置项默认值一句话说明prefixN组件前缀themeabletrue主题化开关globaltrue全局注册组件primaryyellow主色调graystone中性色radius0.5圆角大小fontSize16根字号pxfontSizes预设数组字号切换档位sidebar.cookieNamesidebar:state状态 cookie 名sidebar.cookieMaxAge604800状态有效期秒sidebar.width16rem展开宽度sidebar.widthMobile18rem移动端宽度sidebar.widthIcon3rem折叠宽度sidebar.keyboardShortcutb折叠快捷键五、新手常见疑问改了 primary 不生效检查是否同时有useUnaSettings()在运行时写入 localStorage它会覆盖默认值调用其reset()即可恢复默认。想精简打包体积关闭global按需导入组件并只在fontSizes中保留需要的字号档位。主题与侧边栏配置不够用别忘了uno.config.ts的 shortcuts 扩展入口几乎所有组件样式都能在这里二次覆盖。掌握了这 12 个关键配置项Una UI 就能从开箱默认进化为为你定制。现在就打开你的nuxt.config.ts和app.config.ts动手配置起来吧【免费下载链接】una-uiThe Atomic UI framework for Nuxt, powered by Unocss engine 项目地址: https://gitcode.com/gh_mirrors/un/una-ui创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
Una UI配置完全指南：nuxt.config与app.config的12个关键配置项
Una UI配置完全指南nuxt.config与app.config的12个关键配置项【免费下载链接】una-uiThe Atomic UI framework for Nuxt, powered by Unocss engine 项目地址: https://gitcode.com/gh_mirrors/un/una-ui想要快速上手Una UI配置让这套基于 Unocss 引擎的原子化 UI 框架真正长成你项目的模样本文为你梳理 nuxt.config 与 app.config 中的 12 个关键配置项从组件前缀、全局注册到主色、圆角、侧边栏宽度全部一次讲透照着抄就能用。Una UI 是一款专为 Nuxt 打造的原子化 UI 框架核心引擎是 Unocss。它默认帮你集成了 Unocss、Color Mode深色模式、VueUse、Reka UI 等必备能力你几乎不用做额外安装只需在配置文件里点菜即可。配置分两大入口nuxt.config.ts管模块行为app.config.ts管主题与组件细节下面逐一拆解。一、nuxt.config 配置控制模块行为的 3 个关键项在nuxt.config.ts中通过una字段传入模块选项共 3 个核心配置项。对应源码见 module.ts。配置项默认值类型作用prefixNstring组件名前缀themeabletrueboolean是否启用主题化globaltrueboolean是否全局注册组件1. prefix自定义组件前缀所有 Una UI 组件默认以N开头比如NButton、NCard。想避免与现有组件库冲突改成自己的前缀即可例如改成U后组件就变成UButton。2. themeable一键开关主题能力设为true时会自动加载主题相关插件theme.client.ts 与 theme.server.ts支持运行时换色。不需要主题功能时可关掉减少一点运行时开销。3. global全局注册还是按需导入默认全局注册所有组件开箱即用。若项目组件较多想精简可设false然后手动导入import { NButton } from una-ui/nuxt。// nuxt.config.ts export default defineNuxtConfig({ modules: [una-ui/nuxt], una: { prefix: N, // 组件前缀 themeable: true, // 启用主题化 global: true, // 全局注册组件 }, })二、app.config 配置掌控主题与细节的 9 个关键项主题类的配置统一放在app.config.ts的una字段下运行时可被useUnaSettings()读取并动态修改见 useUnaSettings.ts。4. primary设置主色调所有组件的主色默认是yellow黄改一个词就能让全站换肤支持 Tailwind 风格的全部色板。例如改成blue、violet或自定义色值。5. gray设置中性色默认stone用于边框、背景、文字等中性元素。喜欢偏冷或偏暖的灰可以换成slate、neutral、zinc等。6. radius统一圆角大小默认0.5控制所有组件的圆角风格。想要更圆润的卡片与按钮调到0.75甚至1即可整个 UI 气质立刻不同。7. fontSize根字号基准默认16px作为全局字号基准影响所有text-*工具类的计算。8. fontSizes字号切换预设列表这是一个预设数组供主题切换器ThemeSwitcher在下拉菜单中切换字号使用。替换它即可自定义可选字号档位// app.config.ts export default defineAppConfig({ una: { primary: yellow, gray: stone, radius: 0.5, fontSize: 16, fontSizes: [ { label: 小, value: 14 }, { label: 默认, value: 16 }, { label: 大, value: 18 }, ], }, })9. sidebar.cookieName侧边栏状态存储名侧边栏的开合状态会持久化到 cookie默认名为sidebar:state。多侧边栏场景建议各自命名避免互相覆盖。10. sidebar.cookieMaxAge状态有效期默认604800秒7 天。想一次设置、长期记住把它调大即可。默认值与侧边栏逻辑对应源码见 useSidebar.ts。11. sidebar 宽度三件套width / widthMobile / widthIconwidth展开宽度默认16remwidthMobile移动端宽度默认18remwidthIcon折叠为图标栏时的宽度默认3rem12. sidebar.keyboardShortcut折叠快捷键默认b即按下⌘/Ctrl B快速折叠/展开侧边栏。觉得顺手也可以换成.等其他按键。完整的 app.config 参考写法export default defineAppConfig({ una: { primary: violet, gray: slate, radius: 0.75, sidebar: { keyboardShortcut: ., width: 20rem, }, }, })三、延伸uno.config.ts 里还能玩出什么花除了上述 12 项Una UI 还提供了defaultConfig()帮助函数让你在uno.config.ts中扩展 Unocss 配置并覆盖组件样式官方文档见 una-config.md。import { defaultConfig } from una-ui/nuxt/una.config export default defaultConfig({ shortcuts: [ // 静态组合btn-custom: py-2 px-4 bg-blue-500 text-white rounded, // 动态正则[/^gradient-(\w)$/, ([, c]) bg-gradient-to-r from-${c}-500 to-${c}-700], ], })静态 shortcuts 适合定义常用组合类动态 shortcuts 则能用正则批量生成工具类是二次定制组件外观的利器。底层预设还自带primary、gray、error、success等语义色板见 colors.ts扩展配色非常方便。四、配置速查一张表记住全部默认值配置项默认值一句话说明prefixN组件前缀themeabletrue主题化开关globaltrue全局注册组件primaryyellow主色调graystone中性色radius0.5圆角大小fontSize16根字号pxfontSizes预设数组字号切换档位sidebar.cookieNamesidebar:state状态 cookie 名sidebar.cookieMaxAge604800状态有效期秒sidebar.width16rem展开宽度sidebar.widthMobile18rem移动端宽度sidebar.widthIcon3rem折叠宽度sidebar.keyboardShortcutb折叠快捷键五、新手常见疑问改了 primary 不生效检查是否同时有useUnaSettings()在运行时写入 localStorage它会覆盖默认值调用其reset()即可恢复默认。想精简打包体积关闭global按需导入组件并只在fontSizes中保留需要的字号档位。主题与侧边栏配置不够用别忘了uno.config.ts的 shortcuts 扩展入口几乎所有组件样式都能在这里二次覆盖。掌握了这 12 个关键配置项Una UI 就能从开箱默认进化为为你定制。现在就打开你的nuxt.config.ts和app.config.ts动手配置起来吧【免费下载链接】una-uiThe Atomic UI framework for Nuxt, powered by Unocss engine 项目地址: https://gitcode.com/gh_mirrors/un/una-ui创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
