AI 技能人工智能【免费下载链接】skillsAnthony Fus curated collection of agent skills.项目地址https://gitcode.com/gh_mirrors/skills11/skills点击查看免费下载本文以 UnoCSS 官方 Nuxt 模块unocss/nuxt为主线系统讲解在 Nuxt 应用中接入 UnoCSS 的完整流程依赖安装、uno.config.ts配置文件组织、nuxtLayers配置合并机制以及开发态 Inspector 的使用方法。读完后你将能够在 Nuxt 2/3 项目中落地一套包含 preset、transformer 与 shortcut 的原子化 CSS 方案并理解其与纯 Vite 集成方式的关键差异。一、为什么选择 unocss/nuxt 模块UnoCSS 是一个即时原子化 CSS 引擎核心不绑定任何具体 CSS 规则——所有工具类都由 preset 提供是 Tailwind CSS 的超集可以直接复用 Tailwind 的语法知识。在 Nuxt 应用中UnoCSS 提供了官方 Nuxt 模块unocss/nuxt相比手动配置 Vite 插件模块的最大价值在于自动注入uno.css入口无需手动import virtual:uno.css模块会自动完成样式入口的注入配置文件发现机制一致与 Vite 集成方式相同UnoCSS 会自动查找项目根目录下的uno.config.{js,ts,mjs,mts}或unocss.config.{js,ts,mjs,mts}详见 core-config 参考继承 Vite 插件的全部能力所有 Vite 插件提供的功能在 Nuxt 模块中均可用支持 Nuxt Layers 配置合并可将多个 Nuxt layer 中的 UnoCSS 配置自动合并到根配置中这是 Nuxt 生态独有的增强能力。一个来自仓库 skill 约定skills/unocss/SKILL.md的实用提示在编写 UnoCSS 代码之前应先检查项目根目录是否存在uno.config.*或unocss.config.*文件了解项目已启用的 presets、rules 与 shortcuts。如果项目配置不明应避免使用 attributify 等高级特性坚持基础class用法。二、安装与最小化配置2.1 安装依赖以 pnpm 为例安装两个依赖unocss本体与 Nuxt 模块pnpm add -D unocss unocss/nuxt2.2 注册模块在nuxt.config.ts的modules中注册unocss/nuxt// nuxt.config.ts export default defineNuxtConfig({ modules: [ unocss/nuxt, ], })2.3 创建 uno.config.ts在项目根目录创建独立的 UnoCSS 配置文件这是官方推荐的组织方式对 IDE 支持和 HMR 最友好// uno.config.ts import { defineConfig, presetWind3 } from unocss export default defineConfig({ presets: [ presetWind3(), ], })注意模块会自动注入uno.css入口Nuxt 项目中不需要也不应该手动引入虚拟样式文件。三、构建工具支持矩阵不同 Nuxt 版本对 Webpack 与 Vite 两种构建器的支持情况如下构建工具Nuxt 2Nuxt BridgeNuxt 3Webpack Dev✅✅Webpack Build✅✅✅Vite Dev-✅✅Vite Build-✅✅从该矩阵可以看出Nuxt 3 已全面转向 Vite/Rspack 生态Webpack Dev 模式尚在完善 标记Nuxt 2 与 Nuxt Bridge 则同时兼容 Webpack 与 Vite 两条链路。选型时应以当前项目的 Nuxt 版本与构建器组合为准。四、推荐的配置组织方式4.1 使用独立 uno.config.ts推荐将 UnoCSS 配置放在独立的uno.config.ts中而不是内联到nuxt.config.ts可以获得完整的类型推导与 IDE 支持。在最小配置基础上加入图标 preset 与 shortcut// uno.config.ts import { defineConfig, presetWind3, presetIcons } from unocss export default defineConfig({ presets: [ presetWind3(), presetIcons(), ], shortcuts: { btn: py-2 px-4 font-semibold rounded-lg, }, })其中presetWind3()提供与 Tailwind CSS v3 兼容的工具类集合是最常用的基础 preset详见 preset-wind3 参考presetIcons()基于 Iconify 将任意图标集合渲染为纯 CSS 类例如classi-mdi-alarm text-orange-400可配合scale选项调整相对字号的缩放比例详见 preset-icons 参考shortcuts把多个工具类合并为单个语义化简写如btn在模板中以classbtn使用详见 core-shortcuts 参考。4.2 Nuxt Layers 支持自动合并多层配置这是unocss/nuxt模块相较纯 Vite 集成的核心增强。在nuxt.config.ts中开启nuxtLayers// nuxt.config.ts export default defineNuxtConfig({ unocss: { nuxtLayers: true, }, })开启后模块会收集各 Nuxt layer通过extends引入的共享层参考 Nuxt Layers 文档中声明的 UnoCSS 配置并自动合并。在根配置中直接引用合并产物// uno.config.ts import config from ./.nuxt/uno.config.mjs export default config如果需要在合并结果之上做本地覆盖用unocss/core导出的mergeConfigs将本地配置追加在后后者优先// uno.config.ts import { mergeConfigs } from unocss/core import config from ./.nuxt/uno.config.mjs export default mergeConfigs([config, { // Your overrides shortcuts: { custom: text-red-500, }, }])这种模式适合 monorepo 或团队共享 UI layer 的场景基础层提供默认 preset 与主题 token应用层只写差异化覆盖避免配置复制。五、一个完整的实战配置示例以下是官方文档给出的常见完整配置组合了 presetWind3、attributify、icons、typography、web fonts 以及两个 transformer// nuxt.config.ts export default defineNuxtConfig({ modules: [ unocss/nuxt, ], })// uno.config.ts import { defineConfig, presetAttributify, presetIcons, presetTypography, presetWebFonts, presetWind3, transformerDirectives, transformerVariantGroup, } from unocss export default defineConfig({ presets: [ presetWind3(), presetAttributify(), presetIcons({ scale: 1.2, }), presetTypography(), presetWebFonts({ fonts: { sans: DM Sans, mono: DM Mono, }, }), ], transformers: [ transformerDirectives(), transformerVariantGroup(), ], shortcuts: [ [btn, px-4 py-1 rounded inline-block bg-teal-600 text-white cursor-pointer hover:bg-teal-700 disabled:cursor-default disabled:bg-gray-600 disabled:opacity-50], ], })各部分的作用可对照仓库内参考文档逐一理解presetAttributify()把工具类从class字符串迁移到独立 HTML 属性上如div p4 textcenter适合长 class 串的语义化场景详见 preset-attributify 参考presetTypography()提供prose等排版类处理富文本/Markdown 渲染容器的默认排版presetWebFonts()声明sans/mono等字体族映射自动拉取 Google Fonts 等网络字体transformerDirectives()在 CSS 中启用apply、screen、theme()、icon()指令例如apply py-2 px-4 font-semibold rounded-lg;详见 transformer-directives 参考transformerVariantGroup()启用变体分组简写如hover:(bg-gray-400 font-medium)会被展开为hover:bg-gray-400 hover:font-medium详见 transformer-variant-group 参考。六、在 Vue 组件中使用配置完成后直接在组件模板里书写工具类即可UnoCSS 会自动从源码中提取类名并即时生成 CSStemplate div classp-4 text-center h1 classtext-3xl font-bold text-blue-600 Hello UnoCSS! /h1 button classbtn mt-4 Click me /button /div /template其中btn即上文shortcuts中定义的简写会展开为完整的按钮样式串。若已启用presetAttributify()同一界面也可以写成属性分组形式template div p4 textcenter h1 text3xl blue-600 fontbold Hello UnoCSS! /h1 /div /template属性名对应前缀p展开为 padding 系列、text展开为文字相关工具、font展开为字体工具。当属性名与 HTML 原生属性冲突时可用un-前缀如un-textred对 TypeScript 严格检查的 Vue 3 项目可按 preset-attributify 参考 中的html.d.ts声明放开自定义属性类型。七、开发态 Inspector在开发模式下访问/_nuxt/__unocss即可打开 UnoCSS Inspector 面板用于查看当前生成的 CSS 规则查看各个文件中实际应用了哪些类在 REPL 中试验新的工具类组合。对比 Vite 集成方式访问http://localhost:5173/__unocss见 integrations-vite 参考Nuxt 环境下 Inspector 的路径前缀是/_nuxt/这是由 Nuxt 的构建产物路由规则决定的。八、与 Vite 集成的关键差异unocss/nuxt本质上是 Vite 插件能力的 Nuxt 封装两者的差异点值得明确对比项Vite 集成Nuxt 集成样式入口需手动import virtual:uno.css模块自动注入无需手动引入配置文件发现自动查找uno.config.*/unocss.config.*机制相同功能范围全部 Vite 插件能力全部 Vite 插件能力Layers 合并无支持unocss.nuxtLayers自动合并 layer 配置Inspector 路径http://localhost:5173/__unocss/_nuxt/__unocss另外Vite 插件支持的注入模式global / vue-scoped / shadow-dom 等见 integrations-vite 参考在 Nuxt 模块中同样可用但 Nuxt 场景下默认 global 模式配合自动注入的uno.css入口已足够无需额外调整。九、落地检查清单执行pnpm add -D unocss unocss/nuxt并在nuxt.config.ts的modules中注册项目根目录创建uno.config.ts至少声明presets: [presetWind3()]确认不需要手动引入virtual:uno.css模块自动注入如项目使用 Nuxt layers 且希望共享 UnoCSS 配置开启unocss.nuxtLayers: true并引用.nuxt/uno.config.mjs开发模式下访问/_nuxt/__unocss验证 Inspector 与生成的 CSS按当前 Nuxt 版本与构建器组合核对第三节的支持矩阵Nuxt 3 下优先使用 Vite/Rspack 链路。以上所有配置项rules、theme、variants、safelist、content、outputToCssLayers等的完整说明可参考 core-config 参考preset 与 transformer 的细节分别参见上文各链接指向的参考文档。赞分享AI 技能人工智能【免费下载链接】skillsAnthony Fus curated collection of agent skills.项目地址https://gitcode.com/gh_mirrors/skills11/skills点击查看免费下载相关推荐pinia/nuxt 模块完全指南在 Nuxt 3 / Nuxt 4 项目中安装、配置与使用 Piniapinia/nuxt 模块完全指南在 Nuxt 3 / Nuxt 4 项目中安装、配置与使用 Pinia 本文以 pinia/nuxt 模块为核心讲解如前端状态管理解决90%团队协作难题UnoCSS在Nuxt层中的自动配置合并方案解决90%团队协作难题UnoCSS在Nuxt层中的自动配置合并方案 在现代前端开发中团队协作时的样式配置冲突常常导致效率低下和代码冗余。UnoCSS作为即时前端构建工具Nuxt Layers 全指南编写可复用 Nuxt Layer配置扩展、优先级、发布与模块集成Nuxt Layers 全指南编写可复用 Nuxt Layer配置扩展、优先级、发布与模块集成 Layers层是 Nuxt 提供的一整套应用扩展体系前端后端Web框架SSR上一篇淘金币自动化脚本入门到精通一次配置让手机替你完成每日全部任务下一篇大气层系统Atmosphere使用指南从0到1搭建Switch虚拟系统的完整路径创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考