[{"data":1,"prerenderedAt":4732},["ShallowReactive",2],{"docs-all-flat":3,"docs-\u002Fdocs\u002Fgetting-started\u002Fstyling":1018},[4,8,12,16,20,24,28,32,36,40,44,48,52,56,60,64,68,72,76,80,84,88,92,96,100,104,108,112,116,120,124,128,132,136,140,144,148,152,156,160,164,168,172,176,180,184,188,192,196,200,204,208,212,216,220,224,228,232,236,240,244,248,252,256,260,264,268,272,276,280,284,288,292,296,300,304,308,312,316,320,324,328,332,336,340,344,348,352,355,359,363,367,371,375,379,383,387,391,395,399,403,407,411,415,419,423,427,431,435,439,443,447,451,455,459,463,467,471,475,479,483,487,491,495,499,503,507,511,515,519,523,527,531,535,539,543,547,551,555,559,563,567,571,575,579,583,587,591,595,599,603,607,611,615,619,623,627,631,635,639,643,647,651,655,659,663,667,671,675,679,683,687,691,695,699,703,707,711,715,719,723,727,731,735,739,743,747,751,755,759,763,767,770,774,778,782,786,790,794,798,802,806,809,813,817,821,825,829,833,837,841,845,849,852,855,859,863,867,871,874,877,881,884,888,892,895,898,901,904,907,911,915,918,922,926,930,934,938,942,946,950,954,958,962,966,970,974,978,982,986,990,994,998,1002,1006,1010,1014],{"path":5,"title":6,"description":7},"\u002Fdocs\u002Fgetting-started\u002Fintroduction","介绍","Nuxt 的目标是提供直观且高性能的 Web 开发体验，并始终将优秀的开发者体验（Developer Experience）放在心上。",{"path":9,"title":10,"description":11},"\u002Fdocs\u002Fgetting-started\u002Finstallation","安装","通过在线 starter 快速上手 Nuxt，或在本地使用终端从零开始。",{"path":13,"title":14,"description":15},"\u002Fdocs\u002Fgetting-started\u002Fconfiguration","配置","Nuxt 提供了合理的默认配置，让你高效开发。",{"path":17,"title":18,"description":19},"\u002Fdocs\u002Fgetting-started\u002Fviews","视图","Nuxt 提供了多个组件层来实现应用的用户界面。",{"path":21,"title":22,"description":23},"\u002Fdocs\u002Fgetting-started\u002Fassets","资源","Nuxt 为你的资源提供了两种处理方式。",{"path":25,"title":26,"description":27},"\u002Fdocs\u002Fgetting-started\u002Fstyling","样式","了解如何为你的 Nuxt 应用添加样式。",{"path":29,"title":30,"description":31},"\u002Fdocs\u002Fgetting-started\u002Frouting","路由","Nuxt 的文件系统路由会为 pages\u002F 目录中的每个文件创建一条路由。",{"path":33,"title":34,"description":35},"\u002Fdocs\u002Fgetting-started\u002Fseo-meta","SEO 与 Meta","借助强大的 head 配置、composables 和组件，改善你的 Nuxt 应用的 SEO。",{"path":37,"title":38,"description":39},"\u002Fdocs\u002Fgetting-started\u002Ftransitions","过渡","使用 Vue 或浏览器原生的 View Transitions，在页面和布局之间应用过渡效果。",{"path":41,"title":42,"description":43},"\u002Fdocs\u002Fgetting-started\u002Fdata-fetching","数据获取","Nuxt 提供了用于处理应用内数据获取的 composables。",{"path":45,"title":46,"description":47},"\u002Fdocs\u002Fgetting-started\u002Fstate-management","状态管理","Nuxt 提供了强大的状态管理库和 useState composable，用于创建响应式且对 SSR 友好的共享状态。",{"path":49,"title":50,"description":51},"\u002Fdocs\u002Fgetting-started\u002Ferror-handling","错误处理","了解如何在 Nuxt 中捕获和处理错误。",{"path":53,"title":54,"description":55},"\u002Fdocs\u002Fgetting-started\u002Fserver","Server","利用 Nuxt 的服务端框架构建全栈应用。你可以从数据库或其他服务端获取数据、创建 API，甚至生成像站点地图或 RSS 这样的静态服务端内容——全部来自同一个代码库。",{"path":57,"title":58,"description":59},"\u002Fdocs\u002Fgetting-started\u002Flayers","Layers","Nuxt 提供了一套强大的系统，允许你扩展默认文件、配置以及更多内容。",{"path":61,"title":62,"description":63},"\u002Fdocs\u002Fgetting-started\u002Fprerendering","Prerendering","Nuxt 允许在构建时静态渲染某些页面，以改善特定的性能或 SEO 指标。",{"path":65,"title":66,"description":67},"\u002Fdocs\u002Fgetting-started\u002Fdeployment","Deployment","了解如何将你的 Nuxt 应用部署到任何托管提供商。",{"path":69,"title":70,"description":71},"\u002Fdocs\u002Fgetting-started\u002Ftesting","Testing","如何测试你的 Nuxt 应用。",{"path":73,"title":74,"description":75},"\u002Fdocs\u002Fgetting-started\u002Fupgrade","Upgrade Guide","了解如何升级到最新的 Nuxt 版本。",{"path":77,"title":78,"description":79},"\u002Fdocs\u002Fdirectory-structure\u002Fnuxt",".nuxt","Nuxt 在开发阶段使用 .nuxt\u002F 目录来生成你的 Vue 应用。",{"path":81,"title":82,"description":83},"\u002Fdocs\u002Fdirectory-structure\u002Foutput",".output","Nuxt 在为生产环境构建应用时创建 .output\u002F 目录。",{"path":85,"title":86,"description":87},"\u002Fdocs\u002Fdirectory-structure\u002Fapp\u002Fassets","assets","assets\u002F 目录用于添加所有将由构建工具处理的网站资源。",{"path":89,"title":90,"description":91},"\u002Fdocs\u002Fdirectory-structure\u002Fapp\u002Fcomponents","components","components\u002F 目录用于存放你所有的 Vue 组件。",{"path":93,"title":94,"description":95},"\u002Fdocs\u002Fdirectory-structure\u002Fapp\u002Fcomposables","composables","使用 composables\u002F 目录将你的 Vue 组合式函数自动导入到应用中。",{"path":97,"title":98,"description":99},"\u002Fdocs\u002Fdirectory-structure\u002Fapp\u002Flayouts","layouts","Nuxt 提供了一个布局框架，用于将通用的 UI 模式提取为可复用的布局。",{"path":101,"title":102,"description":103},"\u002Fdocs\u002Fdirectory-structure\u002Fapp\u002Fmiddleware","middleware","Nuxt 提供中间件，用于在导航到特定路由前运行代码。",{"path":105,"title":106,"description":107},"\u002Fdocs\u002Fdirectory-structure\u002Fapp\u002Fpages","pages","Nuxt 提供基于文件的路由，用于在 Web 应用中创建路由。",{"path":109,"title":110,"description":111},"\u002Fdocs\u002Fdirectory-structure\u002Fapp\u002Fplugins","plugins","Nuxt 拥有一个插件系统，用于在创建 Vue 应用时使用 Vue 插件等。",{"path":113,"title":114,"description":115},"\u002Fdocs\u002Fdirectory-structure\u002Fapp\u002Futils","utils","使用 utils\u002F 目录在你的应用中自动导入工具函数。",{"path":117,"title":118,"description":119},"\u002Fdocs\u002Fdirectory-structure\u002Fapp\u002Fapp","app.vue","app.vue 文件是你 Nuxt 应用的主组件。",{"path":121,"title":122,"description":123},"\u002Fdocs\u002Fdirectory-structure\u002Fapp\u002Fapp-config","app.config.ts","使用 App Config 文件在应用内部暴露响应式配置。",{"path":125,"title":126,"description":127},"\u002Fdocs\u002Fdirectory-structure\u002Fapp\u002Ferror","error.vue","error.vue 文件是你 Nuxt 应用中的错误页面。",{"path":129,"title":130,"description":131},"\u002Fdocs\u002Fdirectory-structure\u002Fcontent","content","使用 content\u002F 目录为你的应用创建一个基于文件的 CMS。",{"path":133,"title":134,"description":135},"\u002Fdocs\u002Fdirectory-structure\u002Flayers","layers","使用 layers\u002F 目录在你的应用中组织和自动注册本地 layers。",{"path":137,"title":138,"description":139},"\u002Fdocs\u002Fdirectory-structure\u002Fmodules","modules","使用 modules\u002F 目录在你的应用中自动注册本地模块。",{"path":141,"title":142,"description":143},"\u002Fdocs\u002Fdirectory-structure\u002Fnode_modules","node_modules","包管理器将项目的依赖存储在 node_modules\u002F 目录中。",{"path":145,"title":146,"description":147},"\u002Fdocs\u002Fdirectory-structure\u002Fpublic","public","public\u002F 目录用于提供网站的静态资源。",{"path":149,"title":150,"description":151},"\u002Fdocs\u002Fdirectory-structure\u002Fserver","server","server\u002F 目录用于为你的应用注册 API 和服务端处理器。",{"path":153,"title":154,"description":155},"\u002Fdocs\u002Fdirectory-structure\u002Fshared","shared","使用 shared\u002F 目录在 Vue 应用和 Nitro 服务端之间共享功能。",{"path":157,"title":158,"description":159},"\u002Fdocs\u002Fdirectory-structure\u002Fenv",".env",".env 文件用于指定构建\u002F开发时的环境变量。",{"path":161,"title":162,"description":163},"\u002Fdocs\u002Fdirectory-structure\u002Fgitignore",".gitignore",".gitignore 文件用于指定 git 应当忽略的、有意不跟踪的文件。",{"path":165,"title":166,"description":167},"\u002Fdocs\u002Fdirectory-structure\u002Fnuxtignore",".nuxtignore",".nuxtignore 文件用于让 Nuxt 在构建阶段忽略项目根目录中的文件。",{"path":169,"title":170,"description":171},"\u002Fdocs\u002Fdirectory-structure\u002Fnuxtrc",".nuxtrc",".nuxtrc 文件允许你用扁平语法定义 Nuxt 配置。",{"path":173,"title":174,"description":175},"\u002Fdocs\u002Fdirectory-structure\u002Fnuxt-config","nuxt.config.ts","只需要一个 nuxt.config 文件，即可轻松配置 Nuxt。",{"path":177,"title":178,"description":179},"\u002Fdocs\u002Fdirectory-structure\u002Fpackage","package.json","package.json 文件包含你应用的所有依赖和脚本。",{"path":181,"title":182,"description":183},"\u002Fdocs\u002Fdirectory-structure\u002Ftsconfig","tsconfig.json","了解 Nuxt 如何在项目的不同部分管理 TypeScript 配置。",{"path":185,"title":186,"description":187},"\u002Fdocs\u002Fdirectory-structure","Nuxt 目录结构","了解 Nuxt 应用的目录结构以及如何使用它。",{"path":189,"title":190,"description":191},"\u002Fdocs\u002Fguide","Nuxt 指南","通过深入的指南了解 Nuxt 的工作原理。",{"path":193,"title":194,"description":195},"\u002Fdocs\u002Fguide\u002Fconcepts\u002Frendering","渲染模式","了解 Nuxt 中可用的不同渲染模式。",{"path":197,"title":198,"description":199},"\u002Fdocs\u002Fguide\u002Fconcepts\u002Fvuejs-development","Vue.js 开发","Nuxt 使用 Vue.js，并添加了组件自动导入、基于文件的路由以及支持 SSR 的组合式函数等特性。",{"path":201,"title":202,"description":203},"\u002Fdocs\u002Fguide\u002Fconcepts\u002Fnuxt-lifecycle","Nuxt 生命周期","理解 Nuxt 应用的生命周期，可以帮助你更深入地了解框架是如何运作的，尤其是在服务端渲染和客户端渲染两方面。",{"path":205,"title":206,"description":207},"\u002Fdocs\u002Fguide\u002Fconcepts\u002Fauto-imports","自动导入","Nuxt 会自动导入组件、组合式函数、辅助函数和 Vue API。",{"path":209,"title":210,"description":211},"\u002Fdocs\u002Fguide\u002Fconcepts\u002Fserver-engine","服务端引擎","Nuxt 由一个全新的服务端引擎驱动：Nitro。",{"path":213,"title":214,"description":215},"\u002Fdocs\u002Fguide\u002Fconcepts\u002Fmodules","模块","Nuxt 提供了一个模块系统来扩展框架核心并简化集成。",{"path":217,"title":218,"description":219},"\u002Fdocs\u002Fguide\u002Fconcepts\u002Fesm","ES 模块","Nuxt 使用原生的 ES 模块。",{"path":221,"title":222,"description":223},"\u002Fdocs\u002Fguide\u002Fconcepts\u002Ftypescript","TypeScript","Nuxt 完全类型化，并提供了有用的快捷方式，确保你在编码时能获取准确的类型信息。",{"path":225,"title":226,"description":227},"\u002Fdocs\u002Fguide\u002Fconcepts\u002Fcode-style","代码风格","Nuxt 开箱即用地支持 ESLint",{"path":229,"title":230,"description":231},"\u002Fdocs\u002Fguide\u002Fbest-practices\u002Fdevcontainers","Dev Containers","在开发容器中设置或打开 Nuxt 项目，以获得一致开发环境。",{"path":233,"title":234,"description":235},"\u002Fdocs\u002Fguide\u002Fbest-practices\u002Fhydration","Nuxt and Hydration","为什么修复水合问题很重要",{"path":237,"title":238,"description":239},"\u002Fdocs\u002Fguide\u002Fbest-practices\u002Fperformance","Nuxt performance","提升 Nuxt 应用性能的最佳实践。",{"path":241,"title":242,"description":243},"\u002Fdocs\u002Fguide\u002Fbest-practices\u002Fplugins","Nuxt Plugins","使用 Nuxt 插件时的最佳实践。",{"path":245,"title":246,"description":247},"\u002Fdocs\u002Fguide\u002Fai\u002Fmcp","Nuxt MCP Server","借助 Model Context Protocol 支持，在你的 AI 助手中使用 Nuxt 文档。",{"path":249,"title":250,"description":251},"\u002Fdocs\u002Fguide\u002Fai\u002Fllms-txt","Nuxt LLMs.txt","如何让 Cursor、Windsurf、GitHub Copilot、ChatGPT 和 Claude 等 AI 工具理解 Nuxt 的概念、API 和最佳实践。",{"path":253,"title":254,"description":255},"\u002Fdocs\u002Fguide\u002Fmodules\u002Fgetting-started","创建你的第一个模块","学习如何使用官方启动模板创建你的第一个 Nuxt 模块。",{"path":257,"title":258,"description":259},"\u002Fdocs\u002Fguide\u002Fmodules\u002Fmodule-anatomy","理解模块结构","学习 Nuxt 模块是如何构成的，以及如何定义它们。",{"path":261,"title":262,"description":263},"\u002Fdocs\u002Fguide\u002Fmodules\u002Frecipes-basics","添加插件、组件等","学习如何从你的模块注入插件、组件、组合式函数和服务端路由。",{"path":265,"title":266,"description":267},"\u002Fdocs\u002Fguide\u002Fmodules\u002Fmodule-dependencies","模块依赖","声明对其它模块的依赖，并带有版本约束和配置合并。",{"path":269,"title":270,"description":271},"\u002Fdocs\u002Fguide\u002Fmodules\u002Frecipes-advanced","使用钩子与扩展类型","在你的模块中掌握生命周期钩子、虚拟文件和 TypeScript 声明。",{"path":273,"title":274,"description":275},"\u002Fdocs\u002Fguide\u002Fmodules\u002Ftesting","测试你的模块","学习如何对你的 Nuxt 模块进行单元、集成和 E2E 测试。",{"path":277,"title":278,"description":279},"\u002Fdocs\u002Fguide\u002Fmodules\u002Fbest-practices","遵循最佳实践","使用这些指南构建高性能且可维护的 Nuxt 模块。",{"path":281,"title":282,"description":283},"\u002Fdocs\u002Fguide\u002Fmodules\u002Fecosystem","发布与分享你的模块","加入 Nuxt 模块生态，并将你的模块发布到 npm。",{"path":285,"title":286,"description":287},"\u002Fdocs\u002Fguide\u002Fmodules","Module Author Guide","学习如何创建 Nuxt 模块，以集成、增强或扩展任意 Nuxt 应用。",{"path":289,"title":290,"description":291},"\u002Fdocs\u002Fguide\u002Frecipes\u002Fcustom-routing","自定义路由","在 Nuxt 中，你的路由由 pages 目录内文件的结构定义。不过，由于底层使用了 vue-router，Nuxt 提供了几种在你的项目中添加自定义路由的方式。",{"path":293,"title":294,"description":295},"\u002Fdocs\u002Fguide\u002Frecipes\u002Fvite-plugin","在 Nuxt 中使用 Vite 插件","学习如何将 Vite 插件集成到你的 Nuxt 项目中。",{"path":297,"title":298,"description":299},"\u002Fdocs\u002Fguide\u002Frecipes\u002Fcustom-usefetch","Nuxt 中的自定义 useFetch","如何在 Nuxt 中创建用于调用你外部 API 的自定义 fetcher。",{"path":301,"title":302,"description":303},"\u002Fdocs\u002Fguide\u002Frecipes\u002Fsessions-and-authentication","会话与鉴权","鉴权是 Web 应用中极其常见的需求。本配方将向你展示如何在你的 Nuxt 应用中实现基本的用户注册与鉴权。",{"path":305,"title":306,"description":307},"\u002Fdocs\u002Fguide\u002Fgoing-further\u002Fevents","创建自定义事件","Nuxt 提供了一个由 hookable 驱动的强大事件系统。",{"path":309,"title":310,"description":311},"\u002Fdocs\u002Fguide\u002Fgoing-further\u002Fexperimental-features","实验性特性","启用 Nuxt 实验性特性以解锁新的可能性。",{"path":313,"title":314,"description":315},"\u002Fdocs\u002Fguide\u002Fgoing-further\u002Ffeatures","特性开关","启用或禁用可选的 Nuxt 特性，以解锁新的可能性。",{"path":317,"title":318,"description":319},"\u002Fdocs\u002Fguide\u002Fgoing-further\u002Finternals","Nuxt 是如何工作的？","Nuxt 是一个极简但高度可定制的框架，用于构建 Web 应用。",{"path":321,"title":322,"description":323},"\u002Fdocs\u002Fguide\u002Fgoing-further\u002Fruntime-config","运行时配置","Nuxt 提供了一套运行时配置 API，以在你的应用内暴露配置和密钥。",{"path":325,"title":326,"description":327},"\u002Fdocs\u002Fguide\u002Fgoing-further\u002Fnightly-release-channel","Nightly 发布通道","nightly 发布通道允许使用直接从仓库最新提交构建的 Nuxt。",{"path":329,"title":330,"description":331},"\u002Fdocs\u002Fguide\u002Fgoing-further\u002Fhooks","生命周期钩子","Nuxt 提供了一个强大的钩子系统，可使用钩子扩展几乎每个方面。",{"path":333,"title":334,"description":335},"\u002Fdocs\u002Fguide\u002Fgoing-further\u002Fkit","Nuxt Kit","@nuxt\u002Fkit 提供了面向模块作者的功能。",{"path":337,"title":338,"description":339},"\u002Fdocs\u002Fguide\u002Fgoing-further\u002Fnuxt-app","NuxtApp","在 Nuxt 中，你可以在组合式函数、组件和插件中访问运行时应用上下文。",{"path":341,"title":342,"description":343},"\u002Fdocs\u002Fguide\u002Fgoing-further\u002Flayers","编写 Nuxt Layers","Nuxt 提供了一个强大的系统，允许你扩展默认文件、配置等等。",{"path":345,"title":346,"description":347},"\u002Fdocs\u002Fguide\u002Fgoing-further\u002Fbuilders","创建 Builder","了解 Nuxt builder 是如何工作的，以及如何编写你自己的 builder。",{"path":349,"title":350,"description":351},"\u002Fdocs\u002Fguide\u002Fgoing-further\u002Fdebugging","调试","在 Nuxt 中，你可以直接在浏览器中以及你的 IDE 里开始调试你的应用。",{"path":353,"title":354,"description":354},"\u002Fdocs\u002Fguide\u002Fgoing-further","",{"path":356,"title":357,"description":358},"\u002Fdocs\u002Fapi\u002Fcomponents\u002Fclient-only","\u003CClientOnly>","使用 \u003CClientOnly> 组件仅在客户端渲染组件。",{"path":360,"title":361,"description":362},"\u002Fdocs\u002Fapi\u002Fcomponents\u002Fdev-only","\u003CDevOnly>","使用 \u003CDevOnly> 组件仅在开发期间渲染组件。",{"path":364,"title":365,"description":366},"\u002Fdocs\u002Fapi\u002Fcomponents\u002Fnuxt-client-fallback","\u003CNuxtClientFallback>","Nuxt 提供了 \u003CNuxtClientFallback> 组件，当其任意子组件在 SSR 中触发错误时，在客户端渲染其内容",{"path":368,"title":369,"description":370},"\u002Fdocs\u002Fapi\u002Fcomponents\u002Fnuxt-picture","\u003CNuxtPicture>","Nuxt 提供了 \u003CNuxtPicture> 组件来处理自动图像优化。",{"path":372,"title":373,"description":374},"\u002Fdocs\u002Fapi\u002Fcomponents\u002Fteleports","\u003CTeleport>","\u003CTeleport> 组件将组件传送到 DOM 中的另一个位置。",{"path":376,"title":377,"description":378},"\u002Fdocs\u002Fapi\u002Fcomponents\u002Fnuxt-route-announcer","\u003CNuxtRouteAnnouncer>","\u003CNuxtRouteAnnouncer> 组件添加一个带有页面标题的隐藏元素，用于向辅助技术播报路由变化。",{"path":380,"title":381,"description":382},"\u002Fdocs\u002Fapi\u002Fcomponents\u002Fnuxt-time","\u003CNuxtTime>","\u003CNuxtTime> 组件以本地化友好的格式显示时间，并保持服务端-客户端一致。",{"path":384,"title":385,"description":386},"\u002Fdocs\u002Fapi\u002Fcomponents\u002Fnuxt-announcer","\u003CNuxtAnnouncer>","\u003CNuxtAnnouncer> 组件添加一个隐藏元素，用于向辅助技术播报动态内容变化。",{"path":388,"title":389,"description":390},"\u002Fdocs\u002Fapi\u002Fcomponents\u002Fnuxt-page","\u003CNuxtPage>","\u003CNuxtPage> 组件用于显示位于 pages\u002F 目录中的页面。",{"path":392,"title":393,"description":394},"\u002Fdocs\u002Fapi\u002Fcomponents\u002Fnuxt-layout","\u003CNuxtLayout>","Nuxt 提供了 \u003CNuxtLayout> 组件，用于在页面和错误页面上显示布局。",{"path":396,"title":397,"description":398},"\u002Fdocs\u002Fapi\u002Fcomponents\u002Fnuxt-link","\u003CNuxtLink>","Nuxt 提供了 \u003CNuxtLink> 组件来处理应用内的各类链接。",{"path":400,"title":401,"description":402},"\u002Fdocs\u002Fapi\u002Fcomponents\u002Fnuxt-loading-indicator","\u003CNuxtLoadingIndicator>","在页面导航之间显示进度条。",{"path":404,"title":405,"description":406},"\u002Fdocs\u002Fapi\u002Fcomponents\u002Fnuxt-error-boundary","\u003CNuxtErrorBoundary>","\u003CNuxtErrorBoundary> 组件处理其默认插槽中发生的客户端错误。",{"path":408,"title":409,"description":410},"\u002Fdocs\u002Fapi\u002Fcomponents\u002Fnuxt-welcome","\u003CNuxtWelcome>","\u003CNuxtWelcome> 组件用于欢迎通过启动模板创建的新项目的用户。",{"path":412,"title":413,"description":414},"\u002Fdocs\u002Fapi\u002Fcomponents\u002Fnuxt-island","\u003CNuxtIsland>","Nuxt 提供了 \u003CNuxtIsland> 组件，用于渲染无客户端 JS 的非交互式组件。",{"path":416,"title":417,"description":418},"\u002Fdocs\u002Fapi\u002Fcomponents\u002Fnuxt-img","\u003CNuxtImg>","Nuxt 提供了 \u003CNuxtImg> 组件来处理自动图像优化。",{"path":420,"title":421,"description":422},"\u002Fdocs\u002Fapi\u002Fcomposables\u002Fcreate-use-async-data","createUseAsyncData","一个工厂函数，用于创建带有预定义默认选项的自定义 useAsyncData 组合式函数。",{"path":424,"title":425,"description":426},"\u002Fdocs\u002Fapi\u002Fcomposables\u002Fcreate-use-fetch","createUseFetch","一个工厂函数，用于创建带有预定义默认选项的自定义 useFetch 组合式函数。",{"path":428,"title":429,"description":430},"\u002Fdocs\u002Fapi\u002Fcomposables\u002Fon-prehydrate","onPrehydrate","使用 onPrehydrate 在 Nuxt 对页面进行 hydration 之前的客户端立即运行回调。",{"path":432,"title":433,"description":434},"\u002Fdocs\u002Fapi\u002Fcomposables\u002Fuse-announcer","useAnnouncer","一个用于向屏幕阅读器播报消息的组合式函数。",{"path":436,"title":437,"description":438},"\u002Fdocs\u002Fapi\u002Fcomposables\u002Fuse-app-config","useAppConfig","访问在项目中定义的可响应 app config。",{"path":440,"title":441,"description":442},"\u002Fdocs\u002Fapi\u002Fcomposables\u002Fuse-async-data","useAsyncData","useAsyncData 以 SSR 友好的方式提供对异步解析数据的访问。",{"path":444,"title":445,"description":446},"\u002Fdocs\u002Fapi\u002Fcomposables\u002Fuse-cookie","useCookie","useCookie 是一个 SSR 友好的组合式函数，用于读写 cookie。",{"path":448,"title":449,"description":450},"\u002Fdocs\u002Fapi\u002Fcomposables\u002Fuse-error","useError","useError 组合式函数返回正在被处理的全局 Nuxt 错误。",{"path":452,"title":453,"description":454},"\u002Fdocs\u002Fapi\u002Fcomposables\u002Fuse-fetch","useFetch","使用 SSR 友好的组合式函数从 API 端点获取数据。",{"path":456,"title":457,"description":458},"\u002Fdocs\u002Fapi\u002Fcomposables\u002Fuse-head","useHead","useHead 用于自定义 Nuxt 应用各个页面的 head 属性。",{"path":460,"title":461,"description":462},"\u002Fdocs\u002Fapi\u002Fcomposables\u002Fuse-head-safe","useHeadSafe","处理用户输入时提供 head 数据的推荐方式。",{"path":464,"title":465,"description":466},"\u002Fdocs\u002Fapi\u002Fcomposables\u002Fuse-hydration","useHydration","允许完全控制 hydration 周期，以便从服务端设置和接收数据。",{"path":468,"title":469,"description":470},"\u002Fdocs\u002Fapi\u002Fcomposables\u002Fuse-layout","useLayout","useLayout 返回为当前路由解析出的布局。",{"path":472,"title":473,"description":474},"\u002Fdocs\u002Fapi\u002Fcomposables\u002Fuse-lazy-async-data","useLazyAsyncData","该组合式函数包装 useAsyncData，会在 handler 解析之前立即触发导航。",{"path":476,"title":477,"description":478},"\u002Fdocs\u002Fapi\u002Fcomposables\u002Fuse-lazy-fetch","useLazyFetch","该组合式函数是对 useFetch 的封装，会在 handler 解析之前立即触发导航。",{"path":480,"title":481,"description":482},"\u002Fdocs\u002Fapi\u002Fcomposables\u002Fuse-loading-indicator","useLoadingIndicator","该组合式函数让你访问应用页面的加载状态。",{"path":484,"title":485,"description":486},"\u002Fdocs\u002Fapi\u002Fcomposables\u002Fuse-nuxt-app","useNuxtApp","访问 Nuxt 应用的共享运行时上下文。",{"path":488,"title":489,"description":490},"\u002Fdocs\u002Fapi\u002Fcomposables\u002Fuse-nuxt-data","useNuxtData","访问数据获取组合式函数的当前缓存值。",{"path":492,"title":493,"description":494},"\u002Fdocs\u002Fapi\u002Fcomposables\u002Fuse-preview-mode","usePreviewMode","使用 usePreviewMode 检查并控制 Nuxt 的预览模式",{"path":496,"title":497,"description":498},"\u002Fdocs\u002Fapi\u002Fcomposables\u002Fuse-request-event","useRequestEvent","使用 useRequestEvent 组合式函数访问传入的请求事件。",{"path":500,"title":501,"description":502},"\u002Fdocs\u002Fapi\u002Fcomposables\u002Fuse-request-fetch","useRequestFetch","使用 useRequestFetch 组合式函数为服务端 fetch 请求转发请求上下文和请求头。",{"path":504,"title":505,"description":506},"\u002Fdocs\u002Fapi\u002Fcomposables\u002Fuse-request-header","useRequestHeader","使用 useRequestHeader 访问某个特定的传入请求头。",{"path":508,"title":509,"description":510},"\u002Fdocs\u002Fapi\u002Fcomposables\u002Fuse-request-headers","useRequestHeaders","使用 useRequestHeaders 访问传入的请求头。",{"path":512,"title":513,"description":514},"\u002Fdocs\u002Fapi\u002Fcomposables\u002Fuse-request-url","useRequestURL","使用 useRequestURL 组合式函数访问传入的请求 URL。",{"path":516,"title":517,"description":518},"\u002Fdocs\u002Fapi\u002Fcomposables\u002Fuse-response-header","useResponseHeader","使用 useResponseHeader 设置服务端响应头。",{"path":520,"title":521,"description":522},"\u002Fdocs\u002Fapi\u002Fcomposables\u002Fuse-route","useRoute","useRoute 组合式函数返回当前路由。",{"path":524,"title":525,"description":526},"\u002Fdocs\u002Fapi\u002Fcomposables\u002Fuse-route-announcer","useRouteAnnouncer","该组合式函数监视页面标题变化，并相应地更新播报消息。",{"path":528,"title":529,"description":530},"\u002Fdocs\u002Fapi\u002Fcomposables\u002Fuse-router","useRouter","useRouter 组合式函数返回 router 实例。",{"path":532,"title":533,"description":534},"\u002Fdocs\u002Fapi\u002Fcomposables\u002Fuse-runtime-config","useRuntimeConfig","使用 useRuntimeConfig 组合式函数访问运行时配置变量。",{"path":536,"title":537,"description":538},"\u002Fdocs\u002Fapi\u002Fcomposables\u002Fuse-runtime-hook","useRuntimeHook","在 Nuxt 应用中注册一个运行时钩子，并确保在作用域销毁时被正确清理。",{"path":540,"title":541,"description":542},"\u002Fdocs\u002Fapi\u002Fcomposables\u002Fuse-seo-meta","useSeoMeta","useSeoMeta 组合式函数让你可以将站点的 SEO meta 标签定义为一个扁平对象，并提供完整的 TypeScript 支持。",{"path":544,"title":545,"description":546},"\u002Fdocs\u002Fapi\u002Fcomposables\u002Fuse-server-seo-meta","useServerSeoMeta","useServerSeoMeta 组合式函数让你可以将站点的 SEO meta 标签定义为一个扁平对象，并提供完整的 TypeScript 支持。",{"path":548,"title":549,"description":550},"\u002Fdocs\u002Fapi\u002Fcomposables\u002Fuse-state","useState","useState 组合式函数创建一个可响应的、SSR 友好的共享状态。",{"path":552,"title":553,"description":554},"\u002Fdocs\u002Fapi\u002Futils\u002Fdollarfetch","$fetch","Nuxt 使用 ofetch 全局暴露了 $fetch 辅助函数，用于发起 HTTP 请求。",{"path":556,"title":557,"description":558},"\u002Fdocs\u002Fapi\u002Futils\u002Fabort-navigation","abortNavigation","abortNavigation 是一个辅助函数，用于阻止导航的发生，并在设置了参数时抛出错误。",{"path":560,"title":561,"description":562},"\u002Fdocs\u002Fapi\u002Futils\u002Fadd-route-middleware","addRouteMiddleware","addRouteMiddleware() 是一个在你的应用中动态添加中间件的辅助函数。",{"path":564,"title":565,"description":566},"\u002Fdocs\u002Fapi\u002Futils\u002Fcall-once","callOnce","在 SSR 或 CSR 期间只运行一次给定的函数或代码块。",{"path":568,"title":569,"description":570},"\u002Fdocs\u002Fapi\u002Futils\u002Fclear-error","clearError","clearError 组合式函数清除所有已处理的错误。",{"path":572,"title":573,"description":574},"\u002Fdocs\u002Fapi\u002Futils\u002Fclear-nuxt-data","clearNuxtData","删除 useAsyncData 和 useFetch 的缓存数据、错误状态和挂起的 promise。",{"path":576,"title":577,"description":578},"\u002Fdocs\u002Fapi\u002Futils\u002Fclear-nuxt-state","clearNuxtState","删除 useState 的缓存状态。",{"path":580,"title":581,"description":582},"\u002Fdocs\u002Fapi\u002Futils\u002Fcreate-error","createError","创建一个带有附加元数据的错误对象。",{"path":584,"title":585,"description":586},"\u002Fdocs\u002Fapi\u002Futils\u002Fdefine-lazy-hydration-component","defineLazyHydrationComponent","使用特定策略定义一个懒加载 hydration 组件。",{"path":588,"title":589,"description":590},"\u002Fdocs\u002Fapi\u002Futils\u002Fdefine-nuxt-component","defineNuxtComponent","defineNuxtComponent() 是一个用于使用 Options API 定义类型安全组件的辅助函数。",{"path":592,"title":593,"description":594},"\u002Fdocs\u002Fapi\u002Futils\u002Fdefine-nuxt-plugin","defineNuxtPlugin","defineNuxtPlugin() 是一个用于创建 Nuxt 插件的辅助函数。",{"path":596,"title":597,"description":598},"\u002Fdocs\u002Fapi\u002Futils\u002Fdefine-nuxt-route-middleware","defineNuxtRouteMiddleware","使用 defineNuxtRouteMiddleware 辅助函数创建命名路由中间件。",{"path":600,"title":601,"description":602},"\u002Fdocs\u002Fapi\u002Futils\u002Fdefine-page-meta","definePageMeta","为你的页面组件定义元数据。",{"path":604,"title":605,"description":606},"\u002Fdocs\u002Fapi\u002Futils\u002Fdefine-route-rules","defineRouteRules","在页面层面定义用于混合渲染的路由规则。",{"path":608,"title":609,"description":610},"\u002Fdocs\u002Fapi\u002Futils\u002Fnavigate-to","navigateTo","navigateTo 是一个用于以编程方式导航用户的辅助函数。",{"path":612,"title":613,"description":614},"\u002Fdocs\u002Fapi\u002Futils\u002Fon-before-route-leave","onBeforeRouteLeave","onBeforeRouteLeave 组合式函数允许在组件内部注册一个路由守卫。",{"path":616,"title":617,"description":618},"\u002Fdocs\u002Fapi\u002Futils\u002Fon-before-route-update","onBeforeRouteUpdate","onBeforeRouteUpdate 组合式函数允许在组件内部注册一个路由守卫。",{"path":620,"title":621,"description":622},"\u002Fdocs\u002Fapi\u002Futils\u002Fon-nuxt-ready","onNuxtReady","onNuxtReady 组合式函数允许在你的应用完成初始化之后运行一个回调。",{"path":624,"title":625,"description":626},"\u002Fdocs\u002Fapi\u002Futils\u002Fprefetch-components","prefetchComponents","Nuxt 提供了用于在预取组件方面给予你控制的工具。",{"path":628,"title":629,"description":630},"\u002Fdocs\u002Fapi\u002Futils\u002Fpreload-components","preloadComponents","Nuxt 提供了用于在预加载组件方面给予你控制的工具。",{"path":632,"title":633,"description":634},"\u002Fdocs\u002Fapi\u002Futils\u002Fpreload-route-components","preloadRouteComponents","preloadRouteComponents 允许你手动预加载 Nuxt 应用中的单个页面。",{"path":636,"title":637,"description":638},"\u002Fdocs\u002Fapi\u002Futils\u002Fprerender-routes","prerenderRoutes","prerenderRoutes 向 Nitro 暗示预渲染一个额外的路由。",{"path":640,"title":641,"description":642},"\u002Fdocs\u002Fapi\u002Futils\u002Frefresh-cookie","refreshCookie","当 cookie 发生变化时，手动刷新 useCookie 的值",{"path":644,"title":645,"description":646},"\u002Fdocs\u002Fapi\u002Futils\u002Frefresh-nuxt-data","refreshNuxtData","刷新 Nuxt 中所有或特定的 asyncData 实例",{"path":648,"title":649,"description":650},"\u002Fdocs\u002Fapi\u002Futils\u002Freload-nuxt-app","reloadNuxtApp","reloadNuxtApp 会对页面执行一次硬刷新。",{"path":652,"title":653,"description":654},"\u002Fdocs\u002Fapi\u002Futils\u002Fset-page-layout","setPageLayout","setPageLayout 允许你动态更改页面的布局。",{"path":656,"title":657,"description":658},"\u002Fdocs\u002Fapi\u002Futils\u002Fset-response-status","setResponseStatus","setResponseStatus 设置响应的状态码（以及可选的 statusText）。",{"path":660,"title":661,"description":662},"\u002Fdocs\u002Fapi\u002Futils\u002Fshow-error","showError","Nuxt 提供了一种快速且简单的方式，在需要的时候显示全屏错误页。",{"path":664,"title":665,"description":666},"\u002Fdocs\u002Fapi\u002Futils\u002Fupdate-app-config","updateAppConfig","在运行时更新 App Config。",{"path":668,"title":669,"description":670},"\u002Fdocs\u002Fapi\u002Fcommands\u002Fadd","nuxt add","在你的 Nuxt 应用中快速搭建一个实体（文件）。",{"path":672,"title":673,"description":674},"\u002Fdocs\u002Fapi\u002Fcommands\u002Fanalyze","nuxt analyze","分析生产环境的打包产物或你的 Nuxt 应用。",{"path":676,"title":677,"description":678},"\u002Fdocs\u002Fapi\u002Fcommands\u002Fbuild","nuxt build","构建你的 Nuxt 应用。",{"path":680,"title":681,"description":682},"\u002Fdocs\u002Fapi\u002Fcommands\u002Fbuild-module","nuxt build-module","用于在发布前构建你的 Nuxt 模块的 Nuxt 命令。",{"path":684,"title":685,"description":686},"\u002Fdocs\u002Fapi\u002Fcommands\u002Fcleanup","nuxt cleanup","移除常见的 Nuxt 生成文件和缓存。",{"path":688,"title":689,"description":690},"\u002Fdocs\u002Fapi\u002Fcommands\u002Fdev","nuxt dev","dev 命令会在 http:\u002F\u002Flocalhost:3000 启动一个带有热模块替换（HMR）的开发服务器。",{"path":692,"title":693,"description":694},"\u002Fdocs\u002Fapi\u002Fcommands\u002Fdevtools","nuxt devtools","devtools 命令允许你基于每个项目启用或禁用 Nuxt DevTools。",{"path":696,"title":697,"description":698},"\u002Fdocs\u002Fapi\u002Fcommands\u002Fgenerate","nuxt generate","预渲染应用的每一个路由，并将结果存储为纯 HTML 文件。",{"path":700,"title":701,"description":702},"\u002Fdocs\u002Fapi\u002Fcommands\u002Finfo","nuxt info","info 命令会记录当前或指定 Nuxt 项目的相关信息。",{"path":704,"title":705,"description":706},"\u002Fdocs\u002Fapi\u002Fcommands\u002Finit","create nuxt","init 命令用于初始化一个全新的 Nuxt 项目。",{"path":708,"title":709,"description":710},"\u002Fdocs\u002Fapi\u002Fcommands\u002Fmodule","nuxt module","通过命令行搜索并向你的 Nuxt 应用添加模块。",{"path":712,"title":713,"description":714},"\u002Fdocs\u002Fapi\u002Fcommands\u002Fprepare","nuxt prepare","prepare 命令会在你的应用中创建一个 .nuxt 目录并生成类型。",{"path":716,"title":717,"description":718},"\u002Fdocs\u002Fapi\u002Fcommands\u002Fpreview","nuxt preview","preview 命令会启动一个服务器，用于在运行 build 命令后预览你的应用。",{"path":720,"title":721,"description":722},"\u002Fdocs\u002Fapi\u002Fcommands\u002Ftest","nuxt test","test 命令使用 @nuxt\u002Ftest-utils 运行测试。",{"path":724,"title":725,"description":726},"\u002Fdocs\u002Fapi\u002Fcommands\u002Ftypecheck","nuxt typecheck","typecheck 命令运行 vue-tsc 来全量检查你的应用类型。",{"path":728,"title":729,"description":730},"\u002Fdocs\u002Fapi\u002Fcommands\u002Fupgrade","nuxt upgrade","upgrade 命令将 Nuxt 升级到最新版本。",{"path":732,"title":733,"description":734},"\u002Fdocs\u002Fapi\u002Fkit\u002Fmodules","Modules","Nuxt Kit 提供了一系列工具，帮助你创建和使用模块。你可以使用这些工具来创建自己的模块，或复用已有的模块。",{"path":736,"title":737,"description":738},"\u002Fdocs\u002Fapi\u002Fkit\u002Fruntime-config","Runtime Config","Nuxt Kit 提供了一系列工具，帮助你访问和修改 Nuxt 运行时配置。",{"path":740,"title":741,"description":742},"\u002Fdocs\u002Fapi\u002Fkit\u002Ftemplates","Templates","Nuxt Kit 提供了一系列工具，帮助你处理模板。这些函数允许你在开发和构建期间生成额外的文件。",{"path":744,"title":745,"description":746},"\u002Fdocs\u002Fapi\u002Fkit\u002Fapp-config","App Config","Nuxt Kit 提供了一系列工具，帮助你访问和修改 Nuxt 应用配置。",{"path":748,"title":749,"description":750},"\u002Fdocs\u002Fapi\u002Fkit\u002Fnitro","Nitro","Nuxt Kit 提供了一系列工具，帮助你使用 Nitro。这些函数允许你添加服务器处理器、插件和预渲染路由。",{"path":752,"title":753,"description":754},"\u002Fdocs\u002Fapi\u002Fkit\u002Fresolving","Resolving","Nuxt Kit 提供了从 Nuxt 根目录或自定义基准路径解析路径的实用工具。",{"path":756,"title":757,"description":758},"\u002Fdocs\u002Fapi\u002Fkit\u002Flogging","Logging","Nuxt Kit 提供了一系列工具，帮助你使用日志记录。这些函数允许你以额外功能记录消息。",{"path":760,"title":761,"description":762},"\u002Fdocs\u002Fapi\u002Fkit\u002Fbuilder","Builder","Nuxt Kit 提供了一系列工具，帮助你使用构建器。这些函数允许你扩展 Vite 和 webpack 配置。",{"path":764,"title":765,"description":766},"\u002Fdocs\u002Fapi\u002Fkit\u002Fexamples","Examples","Nuxt Kit 工具的使用示例。",{"path":768,"title":58,"description":769},"\u002Fdocs\u002Fapi\u002Fkit\u002Flayers","Nuxt Kit 提供了帮助你处理层及其目录结构的工具。",{"path":771,"title":772,"description":773},"\u002Fdocs\u002Fapi\u002Fkit\u002Fprogrammatic","Programmatic Usage","Nuxt Kit 提供了一系列工具，帮助你以编程方式使用 Nuxt。这些函数允许你加载 Nuxt、构建 Nuxt，以及加载 Nuxt 配置。",{"path":775,"title":776,"description":777},"\u002Fdocs\u002Fapi\u002Fkit\u002Fcompatibility","Compatibility","Nuxt Kit 提供了一系列工具，帮助你检查模块与不同 Nuxt 版本的兼容性。",{"path":779,"title":780,"description":781},"\u002Fdocs\u002Fapi\u002Fkit\u002Fautoimports","Auto-imports","Nuxt Kit 提供了一系列工具，帮助你处理自动导入。这些函数允许你注册自己的 utils、composables 和 Vue API。",{"path":783,"title":784,"description":785},"\u002Fdocs\u002Fapi\u002Fkit\u002Fcomponents","Components","Nuxt Kit 提供了一系列工具，帮助你处理组件。你可以全局或局部注册组件，也可以添加要被扫描的目录。",{"path":787,"title":788,"description":789},"\u002Fdocs\u002Fapi\u002Fkit\u002Fcontext","Context","Nuxt Kit 提供了一系列工具，帮助你处理上下文。",{"path":791,"title":792,"description":793},"\u002Fdocs\u002Fapi\u002Fkit\u002Fpages","Pages","Nuxt Kit 提供了一系列工具，帮助你创建和使用页面。你可以使用这些工具来操作页面配置或定义路由规则。",{"path":795,"title":796,"description":797},"\u002Fdocs\u002Fapi\u002Fkit\u002Flayout","Layout","Nuxt Kit 提供了一系列工具，帮助你处理布局。",{"path":799,"title":800,"description":801},"\u002Fdocs\u002Fapi\u002Fkit\u002Fhead","Head","Nuxt Kit 提供了一系列工具，帮助你在模块中管理 head 配置。",{"path":803,"title":804,"description":805},"\u002Fdocs\u002Fapi\u002Fkit\u002Fplugins","Plugins","Nuxt Kit 提供了一系列工具，帮助你创建和使用插件。你可以使用这些函数向你的模块添加插件或插件模板。",{"path":807,"title":330,"description":808},"\u002Fdocs\u002Fapi\u002Fadvanced\u002Fhooks","Nuxt 提供了一套强大的钩子系统，可以通过钩子扩展几乎各个方面。",{"path":810,"title":811,"description":812},"\u002Fdocs\u002Fapi\u002Fadvanced\u002Fimport-meta","Import meta","使用 `import.meta` 了解你的代码运行在何处。",{"path":814,"title":815,"description":816},"\u002Fdocs\u002Fapi\u002Fnuxt-config","Nuxt 配置","发现你可以在 nuxt.config.ts 文件中使用的所有选项。",{"path":818,"title":819,"description":820},"\u002Fdocs\u002Fapi","Nuxt API 参考","探索所有 Nuxt 内部机制：组件、组合式函数、工具函数、命令等等。",{"path":822,"title":823,"description":824},"\u002Fdocs\u002Fcommunity\u002Fgetting-help","获取帮助","我们是一个友好的开发者社区，很乐意提供帮助。",{"path":826,"title":827,"description":828},"\u002Fdocs\u002Fcommunity\u002Freporting-bugs","报告 Bug","开源中最有价值的角色之一，就是花时间把 bug 报告得清楚明白。",{"path":830,"title":831,"description":832},"\u002Fdocs\u002Fcommunity\u002Fcontribution","贡献","Nuxt 是一个社区项目——因此我们欢迎各种形式的贡献！❤️",{"path":834,"title":835,"description":836},"\u002Fdocs\u002Fcommunity\u002Fframework-contribution","框架贡献","关于向框架仓库贡献的一些具体要点。",{"path":838,"title":839,"description":840},"\u002Fdocs\u002Fcommunity\u002Froadmap","路线图","Nuxt 在不断发展，新功能和模块一直在增加。",{"path":842,"title":843,"description":844},"\u002Fdocs\u002Fcommunity\u002Fchangelog","发布","发现 Nuxt 及 Nuxt 官方模块的最新发布。",{"path":846,"title":847,"description":848},"\u002Fdocs\u002Fbridge\u002Foverview","概述","缩小与 Nuxt 3 的差异，并减轻迁移到 Nuxt 3 的负担。",{"path":850,"title":14,"description":851},"\u002Fdocs\u002Fbridge\u002Fconfiguration","了解如何根据你的需求配置 Nuxt Bridge。",{"path":853,"title":222,"description":854},"\u002Fdocs\u002Fbridge\u002Ftypescript","了解如何在 Nuxt Bridge 中使用 TypeScript。",{"path":856,"title":857,"description":858},"\u002Fdocs\u002Fbridge\u002Fbridge-composition-api","旧版 Composition API","了解如何使用 Nuxt Bridge 迁移到 Composition API。",{"path":860,"title":861,"description":862},"\u002Fdocs\u002Fbridge\u002Fplugins-and-middleware","插件和中间件","了解如何从 Nuxt 2 迁移到 Nuxt Bridge 的新插件和中间件。",{"path":864,"title":865,"description":866},"\u002Fdocs\u002Fbridge\u002Fnuxt3-compatible-api","新的 Composition API","Nuxt Bridge 实现了与 Nuxt 3 兼容的组合式函数。",{"path":868,"title":869,"description":870},"\u002Fdocs\u002Fbridge\u002Fmeta","Meta 标签","了解如何从 Nuxt 2 迁移到 Nuxt Bridge 的新 meta 标签。",{"path":872,"title":322,"description":873},"\u002Fdocs\u002Fbridge\u002Fruntime-config","Nuxt 提供了一个运行时配置 API，用于在应用中暴露配置和密钥。",{"path":875,"title":749,"description":876},"\u002Fdocs\u002Fbridge\u002Fnitro","通过 Nuxt Bridge 为你的 Nuxt 2 应用激活 Nitro。",{"path":878,"title":879,"description":880},"\u002Fdocs\u002Fbridge\u002Fvite","Vite","通过 Nuxt Bridge 为你的 Nuxt 2 应用激活 Vite。",{"path":882,"title":847,"description":883},"\u002Fdocs\u002Fmigration\u002Foverview","Nuxt 3 是对 Nuxt 2 的完整重写，并且基于一套全新的底层技术。",{"path":885,"title":886,"description":887},"\u002Fdocs\u002Fmigration\u002Fbundling","构建工具","了解如何从 Nuxt 2 迁移到 Nuxt 3 的构建工具。",{"path":889,"title":890,"description":891},"\u002Fdocs\u002Fmigration\u002Fserver","服务器","了解如何从 Nuxt 2 迁移到 Nuxt 3 的服务器。",{"path":893,"title":14,"description":894},"\u002Fdocs\u002Fmigration\u002Fconfiguration","了解如何从 Nuxt 2 迁移到 Nuxt 3 的新配置。",{"path":896,"title":214,"description":897},"\u002Fdocs\u002Fmigration\u002Fmodule-authors","了解如何从 Nuxt 2 迁移到 Nuxt 3 模块。",{"path":899,"title":206,"description":900},"\u002Fdocs\u002Fmigration\u002Fauto-imports","Nuxt 3 采用最小摩擦的方式，即在任何可能的地方自动导入组件和组合式函数。",{"path":902,"title":869,"description":903},"\u002Fdocs\u002Fmigration\u002Fmeta","管理你的 meta 标签，从 Nuxt 2 到 Nuxt 3。",{"path":905,"title":861,"description":906},"\u002Fdocs\u002Fmigration\u002Fplugins-and-middleware","了解如何从 Nuxt 2 迁移到 Nuxt 3 的插件和中间件。",{"path":908,"title":909,"description":910},"\u002Fdocs\u002Fmigration\u002Fpages-and-layouts","页面和布局","了解如何从 Nuxt 2 迁移到 Nuxt 3 的页面和布局。",{"path":912,"title":913,"description":914},"\u002Fdocs\u002Fmigration\u002Fcomponent-options","组件选项","了解如何从 Nuxt 2 的组件选项迁移到 Nuxt 3 的组合式函数。",{"path":916,"title":322,"description":917},"\u002Fdocs\u002Fmigration\u002Fruntime-config","了解如何从 Nuxt 2 迁移到 Nuxt 3 的运行时配置。",{"path":919,"title":920,"description":921},"\u002Fdocs\u002Freadme","Nuxt 文档","本仓库包含 Nuxt 的文档，托管于 https:\u002F\u002Fnuxt.com\u002Fdocs\u002Fgetting-started\u002Fintroduction",{"path":923,"title":924,"description":925},"\u002Fdocs\u002Ferrors\u002Fb5001","NUXT_B5001","缺少 compatibilityDate (兼容性日期)",{"path":927,"title":928,"description":929},"\u002Fdocs\u002Ferrors\u002Fb5003","NUXT_B5003","保留的 runtimeConfig.app 命名空间",{"path":931,"title":932,"description":933},"\u002Fdocs\u002Ferrors\u002Fb5004","NUXT_B5004","不支持外部配置文件",{"path":935,"title":936,"description":937},"\u002Fdocs\u002Ferrors\u002Fe1001","NUXT_E1001","在 Nuxt 上下文之外调用了组合式函数。",{"path":939,"title":940,"description":941},"\u002Fdocs\u002Ferrors\u002Fe1006","NUXT_E1006","onPrehydrate 未被构建流水线处理。",{"path":943,"title":944,"description":945},"\u002Fdocs\u002Ferrors\u002Fe1007","NUXT_E1007","编译期提示辅助函数在运行时被调用。",{"path":947,"title":948,"description":949},"\u002Fdocs\u002Ferrors\u002Fe2001","NUXT_E2001","外部导航未设置 external: true。",{"path":951,"title":952,"description":953},"\u002Fdocs\u002Ferrors\u002Fe2002","NUXT_E2002","使用了危险协议的导航。",{"path":955,"title":956,"description":957},"\u002Fdocs\u002Ferrors\u002Fe2003","NUXT_E2003","abortNavigation() 在中间件之外被调用。",{"path":959,"title":960,"description":961},"\u002Fdocs\u002Ferrors\u002Fe2004","NUXT_E2004","未知的路由中间件。",{"path":963,"title":964,"description":965},"\u002Fdocs\u002Ferrors\u002Fe2005","NUXT_E2005","在中间件内调用了 useRoute。",{"path":967,"title":968,"description":969},"\u002Fdocs\u002Ferrors\u002Fe2007","NUXT_E2007","在组件中于服务端调用了 setPageLayout。",{"path":971,"title":972,"description":973},"\u002Fdocs\u002Ferrors\u002Fe3001","NUXT_E3001","useFetch 的请求 URL 以 \"\u002F\u002F\" 开头。",{"path":975,"title":976,"description":977},"\u002Fdocs\u002Ferrors\u002Fe3008","NUXT_E3008","useAsyncData 的 key 必须是非空字符串。",{"path":979,"title":980,"description":981},"\u002Fdocs\u002Ferrors\u002Fe3009","NUXT_E3009","useAsyncData 的处理函数必须是一个函数。",{"path":983,"title":984,"description":985},"\u002Fdocs\u002Ferrors\u002Fe4012","NUXT_E4012","无法解析 island（岛）响应。",{"path":987,"title":988,"description":989},"\u002Fdocs\u002Ferrors\u002Fe4016","NUXT_E4016","嵌套页面无法显示，因为其父页面没有渲染 \u003CNuxtPage \u002F>。",{"path":991,"title":992,"description":993},"\u002Fdocs\u002Ferrors\u002Fe5001","NUXT_E5001","应用清单（app manifest）未启用。",{"path":995,"title":996,"description":997},"\u002Fdocs\u002Ferrors\u002Fe6001","NUXT_E6001","缺少 Unhead 实例。",{"path":999,"title":1000,"description":1001},"\u002Fdocs\u002Ferrors\u002Fe7001","NUXT_E7001","Payload URL 包含主机名。",{"path":1003,"title":1004,"description":1005},"\u002Fdocs\u002Ferrors\u002Fe7007","NUXT_E7007","useState 的初始化值必须是一个函数。",{"path":1007,"title":1008,"description":1009},"\u002Fdocs\u002Ferrors\u002Fe7008","NUXT_E7008","callOnce 的 fn 必须是一个函数。",{"path":1011,"title":1012,"description":1013},"\u002Fdocs\u002Ferrors\u002Fe7009","NUXT_E7009","useState 的 key 必须是一个字符串。",{"path":1015,"title":1016,"description":1017},"\u002Fdocs\u002Ferrors\u002Fe7010","NUXT_E7010","callOnce 的 key 必须是一个字符串。",{"id":1019,"title":26,"body":1020,"description":27,"extension":4726,"meta":4727,"navigation":4728,"path":25,"seo":4729,"stem":4730,"__hash__":4731},"docs\u002Fdocs\u002F1.getting-started\u002F06.styling.md",{"type":1021,"value":1022,"toc":4693},"minimark",[1023,1027,1032,1044,1049,1061,1200,1206,1210,1222,1278,1283,1287,1302,1411,1414,1467,1471,1478,1559,1562,1630,1633,1674,1678,1681,1691,1788,1792,1795,1798,1856,1868,1872,1875,1882,2015,2024,2028,2031,2086,2096,2137,2143,2185,2190,2204,2209,2268,2275,2462,2470,2474,2483,2489,2552,2563,2567,2575,2584,2588,2591,3346,3353,3364,3367,3524,3528,3531,3630,3634,3646,3744,3748,3769,3919,3937,3941,3947,4024,4027,4064,4067,4108,4112,4115,4235,4237,4241,4255,4263,4308,4323,4327,4335,4349,4353,4357,4368,4370,4374,4387,4392,4396,4399,4413,4421,4424,4690],[1024,1025,1026],"p",{},"Nuxt 在样式方面非常灵活。你可以编写自己的样式，或引用本地及外部样式表。\n你可以使用 CSS 预处理器、CSS 框架、UI 库以及 Nuxt 模块来为应用添加样式。",[1028,1029,1031],"h2",{"id":1030},"本地样式表local-stylesheets","本地样式表（Local Stylesheets）",[1024,1033,1034,1035,1043],{},"如果你在编写本地样式表，最自然的位置是 ",[1036,1037,1038,1042],"a",{"href":85},[1039,1040,1041],"code",{},"app\u002Fassets\u002F"," 目录","。",[1045,1046,1048],"h3",{"id":1047},"在组件内导入importing-within-components","在组件内导入（Importing Within Components）",[1024,1050,1051,1052,1043],{},"你可以在页面、布局和组件中直接导入样式表。\n你可以使用 JavaScript import，或 CSS ",[1036,1053,1057,1060],{"href":1054,"rel":1055},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FCSS\u002FReference\u002FAt-rules\u002F@import",[1056],"nofollow",[1039,1058,1059],{},"@import"," 语句",[1062,1063,1068],"pre",{"className":1064,"code":1065,"filename":1066,"language":1067,"meta":354,"style":354},"language-vue shiki shiki-themes material-theme-lighter github-dark material-theme-palenight","\u003Cscript>\n\u002F\u002F Use a static import for server-side compatibility\nimport '~\u002Fassets\u002Fcss\u002Ffirst.css'\n\n\u002F\u002F Caution: Dynamic imports are not server-side compatible\nimport('~\u002Fassets\u002Fcss\u002Ffirst.css')\n\u003C\u002Fscript>\n\n\u003Cstyle>\n@import url(\"~\u002Fassets\u002Fcss\u002Fsecond.css\");\n\u003C\u002Fstyle>\n","app\u002Fpages\u002Findex.vue","vue",[1039,1069,1070,1086,1093,1111,1118,1124,1144,1154,1159,1169,1191],{"__ignoreMap":354},[1071,1072,1075,1079,1083],"span",{"class":1073,"line":1074},"line",1,[1071,1076,1078],{"class":1077},"sF54B","\u003C",[1071,1080,1082],{"class":1081},"s6g6u","script",[1071,1084,1085],{"class":1077},">\n",[1071,1087,1089],{"class":1073,"line":1088},2,[1071,1090,1092],{"class":1091},"sZqJ9","\u002F\u002F Use a static import for server-side compatibility\n",[1071,1094,1096,1100,1104,1108],{"class":1073,"line":1095},3,[1071,1097,1099],{"class":1098},"szyBz","import",[1071,1101,1103],{"class":1102},"s0jeK"," '",[1071,1105,1107],{"class":1106},"s-Aze","~\u002Fassets\u002Fcss\u002Ffirst.css",[1071,1109,1110],{"class":1102},"'\n",[1071,1112,1114],{"class":1073,"line":1113},4,[1071,1115,1117],{"emptyLinePlaceholder":1116},true,"\n",[1071,1119,1121],{"class":1073,"line":1120},5,[1071,1122,1123],{"class":1091},"\u002F\u002F Caution: Dynamic imports are not server-side compatible\n",[1071,1125,1127,1130,1134,1137,1139,1141],{"class":1073,"line":1126},6,[1071,1128,1099],{"class":1129},"sXPRQ",[1071,1131,1133],{"class":1132},"smVNa","(",[1071,1135,1136],{"class":1102},"'",[1071,1138,1107],{"class":1106},[1071,1140,1136],{"class":1102},[1071,1142,1143],{"class":1132},")\n",[1071,1145,1147,1150,1152],{"class":1073,"line":1146},7,[1071,1148,1149],{"class":1077},"\u003C\u002F",[1071,1151,1082],{"class":1081},[1071,1153,1085],{"class":1077},[1071,1155,1157],{"class":1073,"line":1156},8,[1071,1158,1117],{"emptyLinePlaceholder":1116},[1071,1160,1162,1164,1167],{"class":1073,"line":1161},9,[1071,1163,1078],{"class":1077},[1071,1165,1166],{"class":1081},"style",[1071,1168,1085],{"class":1077},[1071,1170,1172,1174,1178,1180,1183,1186,1188],{"class":1073,"line":1171},10,[1071,1173,1059],{"class":1098},[1071,1175,1177],{"class":1176},"scsZY"," url",[1071,1179,1133],{"class":1077},[1071,1181,1182],{"class":1102},"\"",[1071,1184,1185],{"class":1106},"~\u002Fassets\u002Fcss\u002Fsecond.css",[1071,1187,1182],{"class":1102},[1071,1189,1190],{"class":1077},");\n",[1071,1192,1194,1196,1198],{"class":1073,"line":1193},11,[1071,1195,1149],{"class":1077},[1071,1197,1166],{"class":1081},[1071,1199,1085],{"class":1077},[1201,1202,1203],"tip",{},[1024,1204,1205],{},"这些样式表会被内联到 Nuxt 渲染的 HTML 中。",[1045,1207,1209],{"id":1208},"css-属性the-css-property","CSS 属性（The CSS Property）",[1024,1211,1212,1213,1216,1217,1221],{},"你也可以使用 Nuxt 配置中的 ",[1039,1214,1215],{},"css"," 属性。\n样式表最自然的位置是 ",[1036,1218,1219,1042],{"href":85},[1039,1220,1041],{},"。然后你可以引用它的路径，Nuxt 会将其包含到应用的所有页面中。",[1062,1223,1227],{"className":1224,"code":1225,"filename":174,"language":1226,"meta":354,"style":354},"language-ts shiki shiki-themes material-theme-lighter github-dark material-theme-palenight","export default defineNuxtConfig({\n  css: ['~\u002Fassets\u002Fcss\u002Fmain.css'],\n})\n","ts",[1039,1228,1229,1246,1271],{"__ignoreMap":354},[1071,1230,1231,1234,1237,1241,1243],{"class":1073,"line":1074},[1071,1232,1233],{"class":1098},"export",[1071,1235,1236],{"class":1098}," default",[1071,1238,1240],{"class":1239},"srJn9"," defineNuxtConfig",[1071,1242,1133],{"class":1132},[1071,1244,1245],{"class":1077},"{\n",[1071,1247,1248,1252,1255,1258,1260,1263,1265,1268],{"class":1073,"line":1088},[1071,1249,1251],{"class":1250},"sOtFm","  css",[1071,1253,1254],{"class":1077},":",[1071,1256,1257],{"class":1132}," [",[1071,1259,1136],{"class":1102},[1071,1261,1262],{"class":1106},"~\u002Fassets\u002Fcss\u002Fmain.css",[1071,1264,1136],{"class":1102},[1071,1266,1267],{"class":1132},"]",[1071,1269,1270],{"class":1077},",\n",[1071,1272,1273,1276],{"class":1073,"line":1095},[1071,1274,1275],{"class":1077},"}",[1071,1277,1143],{"class":1132},[1201,1279,1280],{},[1024,1281,1282],{},"这些样式表会被内联到 Nuxt 渲染的 HTML 中，全局注入并出现在所有页面中。",[1045,1284,1286],{"id":1285},"使用字体working-with-fonts","使用字体（Working With Fonts）",[1024,1288,1289,1290,1293,1294,1297,1298,1301],{},"将本地字体文件放到 ",[1039,1291,1292],{},"public\u002F"," 目录中，例如 ",[1039,1295,1296],{},"public\u002Ffonts","。然后就可以在样式表中使用 ",[1039,1299,1300],{},"url()"," 引用它们。",[1062,1303,1307],{"className":1304,"code":1305,"filename":1306,"language":1215,"meta":354,"style":354},"language-css shiki shiki-themes material-theme-lighter github-dark material-theme-palenight","@font-face {\n  font-family: 'FarAwayGalaxy';\n  src: url('\u002Ffonts\u002FFarAwayGalaxy.woff') format('woff');\n  font-weight: normal;\n  font-style: normal;\n  font-display: swap;\n}\n","assets\u002Fcss\u002Fmain.css",[1039,1308,1309,1317,1335,1370,1383,1394,1406],{"__ignoreMap":354},[1071,1310,1311,1314],{"class":1073,"line":1074},[1071,1312,1313],{"class":1098},"@font-face",[1071,1315,1316],{"class":1077}," {\n",[1071,1318,1319,1323,1325,1327,1330,1332],{"class":1073,"line":1088},[1071,1320,1322],{"class":1321},"sETrE","  font-family",[1071,1324,1254],{"class":1077},[1071,1326,1103],{"class":1102},[1071,1328,1329],{"class":1106},"FarAwayGalaxy",[1071,1331,1136],{"class":1102},[1071,1333,1334],{"class":1077},";\n",[1071,1336,1337,1340,1342,1344,1346,1348,1351,1353,1356,1359,1361,1363,1366,1368],{"class":1073,"line":1095},[1071,1338,1339],{"class":1321},"  src",[1071,1341,1254],{"class":1077},[1071,1343,1177],{"class":1176},[1071,1345,1133],{"class":1077},[1071,1347,1136],{"class":1102},[1071,1349,1350],{"class":1106},"\u002Ffonts\u002FFarAwayGalaxy.woff",[1071,1352,1136],{"class":1102},[1071,1354,1355],{"class":1077},")",[1071,1357,1358],{"class":1176}," format",[1071,1360,1133],{"class":1077},[1071,1362,1136],{"class":1102},[1071,1364,1365],{"class":1106},"woff",[1071,1367,1136],{"class":1102},[1071,1369,1190],{"class":1077},[1071,1371,1372,1375,1377,1381],{"class":1073,"line":1113},[1071,1373,1374],{"class":1321},"  font-weight",[1071,1376,1254],{"class":1077},[1071,1378,1380],{"class":1379},"sJTDI"," normal",[1071,1382,1334],{"class":1077},[1071,1384,1385,1388,1390,1392],{"class":1073,"line":1120},[1071,1386,1387],{"class":1321},"  font-style",[1071,1389,1254],{"class":1077},[1071,1391,1380],{"class":1379},[1071,1393,1334],{"class":1077},[1071,1395,1396,1399,1401,1404],{"class":1073,"line":1126},[1071,1397,1398],{"class":1321},"  font-display",[1071,1400,1254],{"class":1077},[1071,1402,1403],{"class":1379}," swap",[1071,1405,1334],{"class":1077},[1071,1407,1408],{"class":1073,"line":1146},[1071,1409,1410],{"class":1077},"}\n",[1024,1412,1413],{},"然后在样式表、页面或组件中按名称引用你的字体：",[1062,1415,1417],{"className":1064,"code":1416,"language":1067,"meta":354,"style":354},"\u003Cstyle>\nh1 {\n  font-family: 'FarAwayGalaxy', sans-serif;\n}\n\u003C\u002Fstyle>\n",[1039,1418,1419,1427,1435,1455,1459],{"__ignoreMap":354},[1071,1420,1421,1423,1425],{"class":1073,"line":1074},[1071,1422,1078],{"class":1077},[1071,1424,1166],{"class":1081},[1071,1426,1085],{"class":1077},[1071,1428,1429,1433],{"class":1073,"line":1088},[1071,1430,1432],{"class":1431},"sv6Pl","h1",[1071,1434,1316],{"class":1077},[1071,1436,1437,1439,1441,1443,1445,1447,1450,1453],{"class":1073,"line":1095},[1071,1438,1322],{"class":1321},[1071,1440,1254],{"class":1077},[1071,1442,1103],{"class":1102},[1071,1444,1329],{"class":1106},[1071,1446,1136],{"class":1102},[1071,1448,1449],{"class":1077},",",[1071,1451,1452],{"class":1379}," sans-serif",[1071,1454,1334],{"class":1077},[1071,1456,1457],{"class":1073,"line":1113},[1071,1458,1410],{"class":1077},[1071,1460,1461,1463,1465],{"class":1073,"line":1120},[1071,1462,1149],{"class":1077},[1071,1464,1166],{"class":1081},[1071,1466,1085],{"class":1077},[1045,1468,1470],{"id":1469},"通过-npm-分发的样式表stylesheets-distributed-through-npm","通过 NPM 分发的样式表（Stylesheets Distributed Through NPM）",[1024,1472,1473,1474,1477],{},"你也可以引用通过 npm 分发的样式表。我们以流行的 ",[1039,1475,1476],{},"animate.css"," 库为例。",[1479,1480,1482,1501,1516,1530,1544],"code-group",{"sync":1481},"pm",[1062,1483,1488],{"className":1484,"code":1485,"filename":1486,"language":1487,"meta":354,"style":354},"language-bash shiki shiki-themes material-theme-lighter github-dark material-theme-palenight","npm install animate.css\n","npm","bash",[1039,1489,1490],{"__ignoreMap":354},[1071,1491,1492,1495,1498],{"class":1073,"line":1074},[1071,1493,1486],{"class":1494},"sJK67",[1071,1496,1497],{"class":1106}," install",[1071,1499,1500],{"class":1106}," animate.css\n",[1062,1502,1505],{"className":1484,"code":1503,"filename":1504,"language":1487,"meta":354,"style":354},"yarn add animate.css\n","yarn",[1039,1506,1507],{"__ignoreMap":354},[1071,1508,1509,1511,1514],{"class":1073,"line":1074},[1071,1510,1504],{"class":1494},[1071,1512,1513],{"class":1106}," add",[1071,1515,1500],{"class":1106},[1062,1517,1520],{"className":1484,"code":1518,"filename":1519,"language":1487,"meta":354,"style":354},"pnpm install animate.css\n","pnpm",[1039,1521,1522],{"__ignoreMap":354},[1071,1523,1524,1526,1528],{"class":1073,"line":1074},[1071,1525,1519],{"class":1494},[1071,1527,1497],{"class":1106},[1071,1529,1500],{"class":1106},[1062,1531,1534],{"className":1484,"code":1532,"filename":1533,"language":1487,"meta":354,"style":354},"bun install animate.css\n","bun",[1039,1535,1536],{"__ignoreMap":354},[1071,1537,1538,1540,1542],{"class":1073,"line":1074},[1071,1539,1533],{"class":1494},[1071,1541,1497],{"class":1106},[1071,1543,1500],{"class":1106},[1062,1545,1548],{"className":1484,"code":1546,"filename":1547,"language":1487,"meta":354,"style":354},"deno install npm:animate.css\n","deno",[1039,1549,1550],{"__ignoreMap":354},[1071,1551,1552,1554,1556],{"class":1073,"line":1074},[1071,1553,1547],{"class":1494},[1071,1555,1497],{"class":1106},[1071,1557,1558],{"class":1106}," npm:animate.css\n",[1024,1560,1561],{},"然后你就可以在页面、布局和组件中直接引用它：",[1062,1563,1566],{"className":1064,"code":1564,"filename":1565,"language":1067,"meta":354,"style":354},"\u003Cscript>\nimport 'animate.css'\n\u003C\u002Fscript>\n\n\u003Cstyle>\n@import url(\"animate.css\");\n\u003C\u002Fstyle>\n","app\u002Fapp.vue",[1039,1567,1568,1576,1586,1594,1598,1606,1622],{"__ignoreMap":354},[1071,1569,1570,1572,1574],{"class":1073,"line":1074},[1071,1571,1078],{"class":1077},[1071,1573,1082],{"class":1081},[1071,1575,1085],{"class":1077},[1071,1577,1578,1580,1582,1584],{"class":1073,"line":1088},[1071,1579,1099],{"class":1098},[1071,1581,1103],{"class":1102},[1071,1583,1476],{"class":1106},[1071,1585,1110],{"class":1102},[1071,1587,1588,1590,1592],{"class":1073,"line":1095},[1071,1589,1149],{"class":1077},[1071,1591,1082],{"class":1081},[1071,1593,1085],{"class":1077},[1071,1595,1596],{"class":1073,"line":1113},[1071,1597,1117],{"emptyLinePlaceholder":1116},[1071,1599,1600,1602,1604],{"class":1073,"line":1120},[1071,1601,1078],{"class":1077},[1071,1603,1166],{"class":1081},[1071,1605,1085],{"class":1077},[1071,1607,1608,1610,1612,1614,1616,1618,1620],{"class":1073,"line":1126},[1071,1609,1059],{"class":1098},[1071,1611,1177],{"class":1176},[1071,1613,1133],{"class":1077},[1071,1615,1182],{"class":1102},[1071,1617,1476],{"class":1106},[1071,1619,1182],{"class":1102},[1071,1621,1190],{"class":1077},[1071,1623,1624,1626,1628],{"class":1073,"line":1146},[1071,1625,1149],{"class":1077},[1071,1627,1166],{"class":1081},[1071,1629,1085],{"class":1077},[1024,1631,1632],{},"该包也可以作为字符串在 Nuxt 配置的 css 属性中引用。",[1062,1634,1636],{"className":1224,"code":1635,"filename":174,"language":1226,"meta":354,"style":354},"export default defineNuxtConfig({\n  css: ['animate.css'],\n})\n",[1039,1637,1638,1650,1668],{"__ignoreMap":354},[1071,1639,1640,1642,1644,1646,1648],{"class":1073,"line":1074},[1071,1641,1233],{"class":1098},[1071,1643,1236],{"class":1098},[1071,1645,1240],{"class":1239},[1071,1647,1133],{"class":1132},[1071,1649,1245],{"class":1077},[1071,1651,1652,1654,1656,1658,1660,1662,1664,1666],{"class":1073,"line":1088},[1071,1653,1251],{"class":1250},[1071,1655,1254],{"class":1077},[1071,1657,1257],{"class":1132},[1071,1659,1136],{"class":1102},[1071,1661,1476],{"class":1106},[1071,1663,1136],{"class":1102},[1071,1665,1267],{"class":1132},[1071,1667,1270],{"class":1077},[1071,1669,1670,1672],{"class":1073,"line":1095},[1071,1671,1275],{"class":1077},[1071,1673,1143],{"class":1132},[1028,1675,1677],{"id":1676},"外部样式表external-stylesheets","外部样式表（External Stylesheets）",[1024,1679,1680],{},"你可以通过在 nuxt.config 文件的 head 部分添加 link 元素，将外部样式表引入应用。你可以使用不同的方法实现这一点。注意本地样式表也可以通过这种方式引入。",[1024,1682,1683,1684,1690],{},"你可以使用 Nuxt 配置的 ",[1036,1685,1687],{"href":1686},"\u002Fdocs\u002Fapi\u002Fnuxt-config#head",[1039,1688,1689],{},"app.head"," 属性来操作 head：",[1062,1692,1695],{"className":1224,"code":1693,"filename":174,"language":1226,"meta":1694,"style":354},"export default defineNuxtConfig({\n  app: {\n    head: {\n      link: [{ rel: 'stylesheet', href: 'https:\u002F\u002Fcdnjs.cloudflare.com\u002Fajax\u002Flibs\u002Fanimate.css\u002F4.1.1\u002Fanimate.min.css' }],\n    },\n  },\n})\n","twoslash",[1039,1696,1697,1709,1718,1727,1772,1777,1782],{"__ignoreMap":354},[1071,1698,1699,1701,1703,1705,1707],{"class":1073,"line":1074},[1071,1700,1233],{"class":1098},[1071,1702,1236],{"class":1098},[1071,1704,1240],{"class":1239},[1071,1706,1133],{"class":1132},[1071,1708,1245],{"class":1077},[1071,1710,1711,1714,1716],{"class":1073,"line":1088},[1071,1712,1713],{"class":1250},"  app",[1071,1715,1254],{"class":1077},[1071,1717,1316],{"class":1077},[1071,1719,1720,1723,1725],{"class":1073,"line":1095},[1071,1721,1722],{"class":1250},"    head",[1071,1724,1254],{"class":1077},[1071,1726,1316],{"class":1077},[1071,1728,1729,1732,1734,1736,1739,1742,1744,1746,1749,1751,1753,1756,1758,1760,1763,1765,1768,1770],{"class":1073,"line":1113},[1071,1730,1731],{"class":1250},"      link",[1071,1733,1254],{"class":1077},[1071,1735,1257],{"class":1132},[1071,1737,1738],{"class":1077},"{",[1071,1740,1741],{"class":1250}," rel",[1071,1743,1254],{"class":1077},[1071,1745,1103],{"class":1102},[1071,1747,1748],{"class":1106},"stylesheet",[1071,1750,1136],{"class":1102},[1071,1752,1449],{"class":1077},[1071,1754,1755],{"class":1250}," href",[1071,1757,1254],{"class":1077},[1071,1759,1103],{"class":1102},[1071,1761,1762],{"class":1106},"https:\u002F\u002Fcdnjs.cloudflare.com\u002Fajax\u002Flibs\u002Fanimate.css\u002F4.1.1\u002Fanimate.min.css",[1071,1764,1136],{"class":1102},[1071,1766,1767],{"class":1077}," }",[1071,1769,1267],{"class":1132},[1071,1771,1270],{"class":1077},[1071,1773,1774],{"class":1073,"line":1120},[1071,1775,1776],{"class":1077},"    },\n",[1071,1778,1779],{"class":1073,"line":1126},[1071,1780,1781],{"class":1077},"  },\n",[1071,1783,1784,1786],{"class":1073,"line":1146},[1071,1785,1275],{"class":1077},[1071,1787,1143],{"class":1132},[1045,1789,1791],{"id":1790},"动态添加样式表dynamically-adding-stylesheets","动态添加样式表（Dynamically Adding Stylesheets）",[1024,1793,1794],{},"你可以使用 useHead composable 在代码中动态设置 head 里的值。",[1796,1797],"read-more",{"to":456},[1062,1799,1801],{"className":1224,"code":1800,"language":1226,"meta":1694,"style":354},"useHead({\n  link: [{ rel: 'stylesheet', href: 'https:\u002F\u002Fcdnjs.cloudflare.com\u002Fajax\u002Flibs\u002Fanimate.css\u002F4.1.1\u002Fanimate.min.css' }],\n})\n",[1039,1802,1803,1811,1850],{"__ignoreMap":354},[1071,1804,1805,1807,1809],{"class":1073,"line":1074},[1071,1806,457],{"class":1239},[1071,1808,1133],{"class":1132},[1071,1810,1245],{"class":1077},[1071,1812,1813,1816,1818,1820,1822,1824,1826,1828,1830,1832,1834,1836,1838,1840,1842,1844,1846,1848],{"class":1073,"line":1088},[1071,1814,1815],{"class":1250},"  link",[1071,1817,1254],{"class":1077},[1071,1819,1257],{"class":1132},[1071,1821,1738],{"class":1077},[1071,1823,1741],{"class":1250},[1071,1825,1254],{"class":1077},[1071,1827,1103],{"class":1102},[1071,1829,1748],{"class":1106},[1071,1831,1136],{"class":1102},[1071,1833,1449],{"class":1077},[1071,1835,1755],{"class":1250},[1071,1837,1254],{"class":1077},[1071,1839,1103],{"class":1102},[1071,1841,1762],{"class":1106},[1071,1843,1136],{"class":1102},[1071,1845,1767],{"class":1077},[1071,1847,1267],{"class":1132},[1071,1849,1270],{"class":1077},[1071,1851,1852,1854],{"class":1073,"line":1095},[1071,1853,1275],{"class":1077},[1071,1855,1143],{"class":1132},[1024,1857,1858,1859,1862,1863,1043],{},"Nuxt 底层使用 ",[1039,1860,1861],{},"unhead","，你可以参考",[1036,1864,1867],{"href":1865,"rel":1866},"https:\u002F\u002Funhead.unjs.io",[1056],"它的完整文档",[1045,1869,1871],{"id":1870},"使用-nitro-插件修改渲染后的-headmodifying-the-rendered-head-with-a-nitro-plugin","使用 Nitro 插件修改渲染后的 Head（Modifying The Rendered Head With A Nitro Plugin）",[1024,1873,1874],{},"如果你需要更高级的控制，可以通过 hook 拦截渲染后的 HTML 并以编程方式修改 head。",[1024,1876,1877,1878,1881],{},"在 ",[1039,1879,1880],{},"~~\u002Fserver\u002Fplugins\u002Fmy-plugin.ts"," 中创建一个插件，如下所示：",[1062,1883,1886],{"className":1224,"code":1884,"filename":1885,"language":1226,"meta":354,"style":354},"import { definePlugin } from 'nitro'\n\nexport default definePlugin((nitro) => {\n  nitro.hooks.hook('render:html', (html) => {\n    html.head.push('\u003Clink rel=\"stylesheet\" href=\"https:\u002F\u002Fcdnjs.cloudflare.com\u002Fajax\u002Flibs\u002Fanimate.css\u002F4.1.1\u002Fanimate.min.css\">')\n  })\n})\n","server\u002Fplugins\u002Fmy-plugin.ts",[1039,1887,1888,1910,1914,1937,1976,2002,2009],{"__ignoreMap":354},[1071,1889,1890,1892,1895,1898,1900,1903,1905,1908],{"class":1073,"line":1074},[1071,1891,1099],{"class":1098},[1071,1893,1894],{"class":1077}," {",[1071,1896,1897],{"class":1132}," definePlugin",[1071,1899,1767],{"class":1077},[1071,1901,1902],{"class":1098}," from",[1071,1904,1103],{"class":1102},[1071,1906,1907],{"class":1106},"nitro",[1071,1909,1110],{"class":1102},[1071,1911,1912],{"class":1073,"line":1088},[1071,1913,1117],{"emptyLinePlaceholder":1116},[1071,1915,1916,1918,1920,1922,1924,1926,1929,1931,1935],{"class":1073,"line":1095},[1071,1917,1233],{"class":1098},[1071,1919,1236],{"class":1098},[1071,1921,1897],{"class":1239},[1071,1923,1133],{"class":1132},[1071,1925,1133],{"class":1077},[1071,1927,1907],{"class":1928},"ssIVr",[1071,1930,1355],{"class":1077},[1071,1932,1934],{"class":1933},"sV7Px"," =>",[1071,1936,1316],{"class":1077},[1071,1938,1939,1942,1945,1948,1950,1953,1955,1957,1960,1962,1964,1967,1970,1972,1974],{"class":1073,"line":1113},[1071,1940,1941],{"class":1132},"  nitro",[1071,1943,1944],{"class":1077},".",[1071,1946,1947],{"class":1132},"hooks",[1071,1949,1944],{"class":1077},[1071,1951,1952],{"class":1239},"hook",[1071,1954,1133],{"class":1250},[1071,1956,1136],{"class":1102},[1071,1958,1959],{"class":1106},"render:html",[1071,1961,1136],{"class":1102},[1071,1963,1449],{"class":1077},[1071,1965,1966],{"class":1077}," (",[1071,1968,1969],{"class":1928},"html",[1071,1971,1355],{"class":1077},[1071,1973,1934],{"class":1933},[1071,1975,1316],{"class":1077},[1071,1977,1978,1981,1983,1986,1988,1991,1993,1995,1998,2000],{"class":1073,"line":1120},[1071,1979,1980],{"class":1132},"    html",[1071,1982,1944],{"class":1077},[1071,1984,1985],{"class":1132},"head",[1071,1987,1944],{"class":1077},[1071,1989,1990],{"class":1239},"push",[1071,1992,1133],{"class":1250},[1071,1994,1136],{"class":1102},[1071,1996,1997],{"class":1106},"\u003Clink rel=\"stylesheet\" href=\"https:\u002F\u002Fcdnjs.cloudflare.com\u002Fajax\u002Flibs\u002Fanimate.css\u002F4.1.1\u002Fanimate.min.css\">",[1071,1999,1136],{"class":1102},[1071,2001,1143],{"class":1250},[1071,2003,2004,2007],{"class":1073,"line":1126},[1071,2005,2006],{"class":1077},"  }",[1071,2008,1143],{"class":1250},[1071,2010,2011,2013],{"class":1073,"line":1146},[1071,2012,1275],{"class":1077},[1071,2014,1143],{"class":1132},[1024,2016,2017,2018,2023],{},"外部样式表是阻塞渲染的资源（render-blocking）：在浏览器渲染页面之前，它们必须被加载和处理。包含不必要的大样式表的网页渲染时间会更长。你可以在 ",[1036,2019,2022],{"href":2020,"rel":2021},"https:\u002F\u002Fweb.dev\u002Farticles\u002Fdefer-non-critical-css",[1056],"web.dev"," 上阅读更多内容。",[1028,2025,2027],{"id":2026},"使用预处理器using-preprocessors","使用预处理器（Using Preprocessors）",[1024,2029,2030],{},"要使用 SCSS、Sass、Less 或 Stylus 等预处理器，请先安装它。",[1479,2032,2033,2052,2069],{},[1062,2034,2037],{"className":1484,"code":2035,"filename":2036,"language":1487,"meta":354,"style":354},"npm install -D sass\n","Sass & SCSS",[1039,2038,2039],{"__ignoreMap":354},[1071,2040,2041,2043,2045,2049],{"class":1073,"line":1074},[1071,2042,1486],{"class":1494},[1071,2044,1497],{"class":1106},[1071,2046,2048],{"class":2047},"supr-"," -D",[1071,2050,2051],{"class":1106}," sass\n",[1062,2053,2056],{"className":1484,"code":2054,"filename":2055,"language":1487,"meta":354,"style":354},"npm install -D less\n","Less",[1039,2057,2058],{"__ignoreMap":354},[1071,2059,2060,2062,2064,2066],{"class":1073,"line":1074},[1071,2061,1486],{"class":1494},[1071,2063,1497],{"class":1106},[1071,2065,2048],{"class":2047},[1071,2067,2068],{"class":1106}," less\n",[1062,2070,2073],{"className":1484,"code":2071,"filename":2072,"language":1487,"meta":354,"style":354},"npm install -D stylus\n","Stylus",[1039,2074,2075],{"__ignoreMap":354},[1071,2076,2077,2079,2081,2083],{"class":1073,"line":1074},[1071,2078,1486],{"class":1494},[1071,2080,1497],{"class":1106},[1071,2082,2048],{"class":2047},[1071,2084,2085],{"class":1106}," stylus\n",[1024,2087,2088,2089,2092,2093,2095],{},"样式表最自然的位置是 ",[1039,2090,2091],{},"app\u002Fassets"," 目录。\n然后你可以使用预处理器的语法在 ",[1039,2094,118],{},"（或布局文件）中导入源文件。",[1062,2097,2100],{"className":1064,"code":2098,"filename":2099,"language":1067,"meta":354,"style":354},"\u003Cstyle lang=\"scss\">\n@use \"~\u002Fassets\u002Fscss\u002Fmain.scss\";\n\u003C\u002Fstyle>\n","app\u002Fpages\u002Fapp.vue",[1039,2101,2102,2124,2129],{"__ignoreMap":354},[1071,2103,2104,2106,2108,2112,2115,2117,2120,2122],{"class":1073,"line":1074},[1071,2105,1078],{"class":1077},[1071,2107,1166],{"class":1081},[1071,2109,2111],{"class":2110},"sXjFp"," lang",[1071,2113,2114],{"class":1077},"=",[1071,2116,1182],{"class":1102},[1071,2118,2119],{"class":1106},"scss",[1071,2121,1182],{"class":1102},[1071,2123,1085],{"class":1077},[1071,2125,2126],{"class":1073,"line":1088},[1071,2127,2128],{"class":1132},"@use \"~\u002Fassets\u002Fscss\u002Fmain.scss\";\n",[1071,2130,2131,2133,2135],{"class":1073,"line":1095},[1071,2132,1149],{"class":1077},[1071,2134,1166],{"class":1081},[1071,2136,1085],{"class":1077},[1024,2138,2139,2140,2142],{},"或者，你也可以使用 Nuxt 配置的 ",[1039,2141,1215],{}," 属性。",[1062,2144,2146],{"className":1224,"code":2145,"filename":174,"language":1226,"meta":1694,"style":354},"export default defineNuxtConfig({\n  css: ['~\u002Fassets\u002Fscss\u002Fmain.scss'],\n})\n",[1039,2147,2148,2160,2179],{"__ignoreMap":354},[1071,2149,2150,2152,2154,2156,2158],{"class":1073,"line":1074},[1071,2151,1233],{"class":1098},[1071,2153,1236],{"class":1098},[1071,2155,1240],{"class":1239},[1071,2157,1133],{"class":1132},[1071,2159,1245],{"class":1077},[1071,2161,2162,2164,2166,2168,2170,2173,2175,2177],{"class":1073,"line":1088},[1071,2163,1251],{"class":1250},[1071,2165,1254],{"class":1077},[1071,2167,1257],{"class":1132},[1071,2169,1136],{"class":1102},[1071,2171,2172],{"class":1106},"~\u002Fassets\u002Fscss\u002Fmain.scss",[1071,2174,1136],{"class":1102},[1071,2176,1267],{"class":1132},[1071,2178,1270],{"class":1077},[1071,2180,2181,2183],{"class":1073,"line":1095},[1071,2182,1275],{"class":1077},[1071,2184,1143],{"class":1132},[1201,2186,2187],{},[1024,2188,2189],{},"在这两种情况下，编译后的样式表都会被内联到 Nuxt 渲染的 HTML 中。",[1024,2191,2192,2193,2198,2199,1043],{},"如果你需要在预处理文件中注入代码，例如包含颜色变量的 ",[1036,2194,2197],{"href":2195,"rel":2196},"https:\u002F\u002Fsass-lang.com\u002Fdocumentation\u002Fat-rules\u002Fuse\u002F#partials",[1056],"Sass partial","，可以使用 Vite 的 ",[1036,2200,2203],{"href":2201,"rel":2202},"https:\u002F\u002Fvite.dev\u002Fconfig\u002Fshared-options#css-preprocessoroptions",[1056],"preprocessors options",[1024,2205,1877,2206,2208],{},[1039,2207,2091],{}," 目录中创建一些 partial：",[1479,2210,2212,2250],{"sync":2211},"preprocessor",[1062,2213,2217],{"className":2214,"code":2215,"filename":2216,"language":2119,"meta":354,"style":354},"language-scss shiki shiki-themes material-theme-lighter github-dark material-theme-palenight","$primary: #49240F;\n$secondary: #E4A79D;\n","assets\u002F_colors.scss",[1039,2218,2219,2236],{"__ignoreMap":354},[1071,2220,2221,2225,2227,2231,2234],{"class":1073,"line":1074},[1071,2222,2224],{"class":2223},"ssdHM","$primary",[1071,2226,1254],{"class":1077},[1071,2228,2230],{"class":2229},"s0q4w"," #",[1071,2232,2233],{"class":1379},"49240F",[1071,2235,1334],{"class":1077},[1071,2237,2238,2241,2243,2245,2248],{"class":1073,"line":1088},[1071,2239,2240],{"class":2223},"$secondary",[1071,2242,1254],{"class":1077},[1071,2244,2230],{"class":2229},[1071,2246,2247],{"class":1379},"E4A79D",[1071,2249,1334],{"class":1077},[1062,2251,2256],{"className":2252,"code":2253,"filename":2254,"language":2255,"meta":354,"style":354},"language-sass shiki shiki-themes material-theme-lighter github-dark material-theme-palenight","$primary: #49240F\n$secondary: #E4A79D\n","assets\u002F_colors.sass","sass",[1039,2257,2258,2263],{"__ignoreMap":354},[1071,2259,2260],{"class":1073,"line":1074},[1071,2261,2262],{},"$primary: #49240F\n",[1071,2264,2265],{"class":1073,"line":1088},[1071,2266,2267],{},"$secondary: #E4A79D\n",[1024,2269,2270,2271,2274],{},"然后在你的 ",[1039,2272,2273],{},"nuxt.config"," 中：",[1479,2276,2277,2371],{},[1062,2278,2281],{"className":1224,"code":2279,"filename":2280,"language":1226,"meta":1694,"style":354},"export default defineNuxtConfig({\n  vite: {\n    css: {\n      preprocessorOptions: {\n        scss: {\n          additionalData: '@use \"~\u002Fassets\u002F_colors.scss\" as *;',\n        },\n      },\n    },\n  },\n})\n","SCSS",[1039,2282,2283,2295,2304,2313,2322,2331,2347,2352,2357,2361,2365],{"__ignoreMap":354},[1071,2284,2285,2287,2289,2291,2293],{"class":1073,"line":1074},[1071,2286,1233],{"class":1098},[1071,2288,1236],{"class":1098},[1071,2290,1240],{"class":1239},[1071,2292,1133],{"class":1132},[1071,2294,1245],{"class":1077},[1071,2296,2297,2300,2302],{"class":1073,"line":1088},[1071,2298,2299],{"class":1250},"  vite",[1071,2301,1254],{"class":1077},[1071,2303,1316],{"class":1077},[1071,2305,2306,2309,2311],{"class":1073,"line":1095},[1071,2307,2308],{"class":1250},"    css",[1071,2310,1254],{"class":1077},[1071,2312,1316],{"class":1077},[1071,2314,2315,2318,2320],{"class":1073,"line":1113},[1071,2316,2317],{"class":1250},"      preprocessorOptions",[1071,2319,1254],{"class":1077},[1071,2321,1316],{"class":1077},[1071,2323,2324,2327,2329],{"class":1073,"line":1120},[1071,2325,2326],{"class":1250},"        scss",[1071,2328,1254],{"class":1077},[1071,2330,1316],{"class":1077},[1071,2332,2333,2336,2338,2340,2343,2345],{"class":1073,"line":1126},[1071,2334,2335],{"class":1250},"          additionalData",[1071,2337,1254],{"class":1077},[1071,2339,1103],{"class":1102},[1071,2341,2342],{"class":1106},"@use \"~\u002Fassets\u002F_colors.scss\" as *;",[1071,2344,1136],{"class":1102},[1071,2346,1270],{"class":1077},[1071,2348,2349],{"class":1073,"line":1146},[1071,2350,2351],{"class":1077},"        },\n",[1071,2353,2354],{"class":1073,"line":1156},[1071,2355,2356],{"class":1077},"      },\n",[1071,2358,2359],{"class":1073,"line":1161},[1071,2360,1776],{"class":1077},[1071,2362,2363],{"class":1073,"line":1171},[1071,2364,1781],{"class":1077},[1071,2366,2367,2369],{"class":1073,"line":1193},[1071,2368,1275],{"class":1077},[1071,2370,1143],{"class":1132},[1062,2372,2375],{"className":1224,"code":2373,"filename":2374,"language":1226,"meta":1694,"style":354},"export default defineNuxtConfig({\n  vite: {\n    css: {\n      preprocessorOptions: {\n        sass: {\n          additionalData: '@use \"~\u002Fassets\u002F_colors.sass\" as *\\n',\n        },\n      },\n    },\n  },\n})\n","SASS",[1039,2376,2377,2389,2397,2405,2413,2422,2440,2444,2448,2452,2456],{"__ignoreMap":354},[1071,2378,2379,2381,2383,2385,2387],{"class":1073,"line":1074},[1071,2380,1233],{"class":1098},[1071,2382,1236],{"class":1098},[1071,2384,1240],{"class":1239},[1071,2386,1133],{"class":1132},[1071,2388,1245],{"class":1077},[1071,2390,2391,2393,2395],{"class":1073,"line":1088},[1071,2392,2299],{"class":1250},[1071,2394,1254],{"class":1077},[1071,2396,1316],{"class":1077},[1071,2398,2399,2401,2403],{"class":1073,"line":1095},[1071,2400,2308],{"class":1250},[1071,2402,1254],{"class":1077},[1071,2404,1316],{"class":1077},[1071,2406,2407,2409,2411],{"class":1073,"line":1113},[1071,2408,2317],{"class":1250},[1071,2410,1254],{"class":1077},[1071,2412,1316],{"class":1077},[1071,2414,2415,2418,2420],{"class":1073,"line":1120},[1071,2416,2417],{"class":1250},"        sass",[1071,2419,1254],{"class":1077},[1071,2421,1316],{"class":1077},[1071,2423,2424,2426,2428,2430,2433,2436,2438],{"class":1073,"line":1126},[1071,2425,2335],{"class":1250},[1071,2427,1254],{"class":1077},[1071,2429,1103],{"class":1102},[1071,2431,2432],{"class":1106},"@use \"~\u002Fassets\u002F_colors.sass\" as *",[1071,2434,2435],{"class":1379},"\\n",[1071,2437,1136],{"class":1102},[1071,2439,1270],{"class":1077},[1071,2441,2442],{"class":1073,"line":1146},[1071,2443,2351],{"class":1077},[1071,2445,2446],{"class":1073,"line":1156},[1071,2447,2356],{"class":1077},[1071,2449,2450],{"class":1073,"line":1161},[1071,2451,1776],{"class":1077},[1071,2453,2454],{"class":1073,"line":1171},[1071,2455,1781],{"class":1077},[1071,2457,2458,2460],{"class":1073,"line":1193},[1071,2459,1275],{"class":1077},[1071,2461,1143],{"class":1132},[1024,2463,2464,2465,1043],{},"Nuxt 默认使用 Vite。如果你想改用 webpack，请参考各个预处理器 loader 的",[1036,2466,2469],{"href":2467,"rel":2468},"https:\u002F\u002Fwebpack.js.org\u002Floaders\u002Fsass-loader\u002F",[1056],"文档",[1045,2471,2473],{"id":2472},"预处理器-workers实验性preprocessor-workers-experimental","预处理器 Workers（实验性）（Preprocessor Workers (Experimental)）",[1024,2475,2476,2477,2482],{},"Vite 提供了一个",[1036,2478,2481],{"href":2479,"rel":2480},"https:\u002F\u002Fvite.dev\u002Fconfig\u002Fshared-options#css-preprocessormaxworkers",[1056],"实验性选项","，可以加速预处理器的使用。",[1024,2484,2485,2486,2488],{},"你可以在 ",[1039,2487,2273],{}," 中启用它：",[1062,2490,2492],{"className":1224,"code":2491,"language":1226,"meta":354,"style":354},"export default defineNuxtConfig({\n  vite: {\n    css: {\n      preprocessorMaxWorkers: true, \u002F\u002F number of CPUs minus 1\n    },\n  },\n})\n",[1039,2493,2494,2506,2514,2522,2538,2542,2546],{"__ignoreMap":354},[1071,2495,2496,2498,2500,2502,2504],{"class":1073,"line":1074},[1071,2497,1233],{"class":1098},[1071,2499,1236],{"class":1098},[1071,2501,1240],{"class":1239},[1071,2503,1133],{"class":1132},[1071,2505,1245],{"class":1077},[1071,2507,2508,2510,2512],{"class":1073,"line":1088},[1071,2509,2299],{"class":1250},[1071,2511,1254],{"class":1077},[1071,2513,1316],{"class":1077},[1071,2515,2516,2518,2520],{"class":1073,"line":1095},[1071,2517,2308],{"class":1250},[1071,2519,1254],{"class":1077},[1071,2521,1316],{"class":1077},[1071,2523,2524,2527,2529,2533,2535],{"class":1073,"line":1113},[1071,2525,2526],{"class":1250},"      preprocessorMaxWorkers",[1071,2528,1254],{"class":1077},[1071,2530,2532],{"class":2531},"si1Qm"," true",[1071,2534,1449],{"class":1077},[1071,2536,2537],{"class":1091}," \u002F\u002F number of CPUs minus 1\n",[1071,2539,2540],{"class":1073,"line":1120},[1071,2541,1776],{"class":1077},[1071,2543,2544],{"class":1073,"line":1126},[1071,2545,1781],{"class":1077},[1071,2547,2548,2550],{"class":1073,"line":1146},[1071,2549,1275],{"class":1077},[1071,2551,1143],{"class":1132},[2553,2554,2555],"note",{},[1024,2556,2557,2558,1043],{},"这是一个实验性选项，你应该参考 Vite 文档并",[1036,2559,2562],{"href":2560,"rel":2561},"https:\u002F\u002Fgithub.com\u002Fvitejs\u002Fvite\u002Fdiscussions\u002F15835",[1056],"提供反馈",[1028,2564,2566],{"id":2565},"单文件组件sfc样式single-file-components-sfc-styling","单文件组件（SFC）样式（Single File Components (SFC) Styling）",[1024,2568,2569,2570,1043],{},"Vue 和 SFC 最棒的地方之一，就是它在处理样式方面非常自然。你可以直接在组件文件的 style 块中编写 CSS 或预处理器代码，因此你无需使用 CSS-in-JS 之类的方案就能获得极佳的开发者体验。不过，如果你希望使用 CSS-in-JS，可以找到支持它的第三方库和模块，例如 ",[1036,2571,2574],{"href":2572,"rel":2573},"https:\u002F\u002Fgithub.com\u002FTahul\u002Fpinceau",[1056],"pinceau",[1024,2576,2577,2578,2583],{},"你可以参考 ",[1036,2579,2582],{"href":2580,"rel":2581},"https:\u002F\u002Fvuejs.org\u002Fapi\u002Fsfc-css-features",[1056],"Vue 文档"," 获取关于在 SFC 中为组件添加样式的完整参考。",[1045,2585,2587],{"id":2586},"类与样式绑定class-and-style-bindings","类与样式绑定（Class And Style Bindings）",[1024,2589,2590],{},"你可以利用 Vue SFC 特性，通过 class 和 style 属性为组件添加样式。",[1479,2592,2593,2817,3032,3144],{},[1062,2594,2597],{"className":1064,"code":2595,"filename":2596,"language":1067,"meta":354,"style":354},"\u003Cscript setup lang=\"ts\">\nconst isActive = ref(true)\nconst hasError = ref(false)\nconst classObject = reactive({\n  'active': true,\n  'text-danger': false,\n})\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cdiv\n    class=\"static\"\n    :class=\"{ 'active': isActive, 'text-danger': hasError }\"\n  \u002F>\n  \u003Cdiv :class=\"classObject\" \u002F>\n\u003C\u002Ftemplate>\n","Ref and Reactive",[1039,2598,2599,2620,2641,2659,2675,2692,2708,2714,2722,2726,2735,2743,2759,2774,2783,2808],{"__ignoreMap":354},[1071,2600,2601,2603,2605,2608,2610,2612,2614,2616,2618],{"class":1073,"line":1074},[1071,2602,1078],{"class":1077},[1071,2604,1082],{"class":1081},[1071,2606,2607],{"class":2110}," setup",[1071,2609,2111],{"class":2110},[1071,2611,2114],{"class":1077},[1071,2613,1182],{"class":1102},[1071,2615,1226],{"class":1106},[1071,2617,1182],{"class":1102},[1071,2619,1085],{"class":1077},[1071,2621,2622,2625,2628,2631,2634,2636,2639],{"class":1073,"line":1088},[1071,2623,2624],{"class":1933},"const",[1071,2626,2627],{"class":1379}," isActive",[1071,2629,2630],{"class":1129}," =",[1071,2632,2633],{"class":1239}," ref",[1071,2635,1133],{"class":1132},[1071,2637,2638],{"class":2531},"true",[1071,2640,1143],{"class":1132},[1071,2642,2643,2645,2648,2650,2652,2654,2657],{"class":1073,"line":1095},[1071,2644,2624],{"class":1933},[1071,2646,2647],{"class":1379}," hasError",[1071,2649,2630],{"class":1129},[1071,2651,2633],{"class":1239},[1071,2653,1133],{"class":1132},[1071,2655,2656],{"class":2531},"false",[1071,2658,1143],{"class":1132},[1071,2660,2661,2663,2666,2668,2671,2673],{"class":1073,"line":1113},[1071,2662,2624],{"class":1933},[1071,2664,2665],{"class":1379}," classObject",[1071,2667,2630],{"class":1129},[1071,2669,2670],{"class":1239}," reactive",[1071,2672,1133],{"class":1132},[1071,2674,1245],{"class":1077},[1071,2676,2677,2680,2684,2686,2688,2690],{"class":1073,"line":1120},[1071,2678,2679],{"class":1102},"  '",[1071,2681,2683],{"class":2682},"sSD0A","active",[1071,2685,1136],{"class":1102},[1071,2687,1254],{"class":1077},[1071,2689,2532],{"class":2531},[1071,2691,1270],{"class":1077},[1071,2693,2694,2696,2699,2701,2703,2706],{"class":1073,"line":1126},[1071,2695,2679],{"class":1102},[1071,2697,2698],{"class":2682},"text-danger",[1071,2700,1136],{"class":1102},[1071,2702,1254],{"class":1077},[1071,2704,2705],{"class":2531}," false",[1071,2707,1270],{"class":1077},[1071,2709,2710,2712],{"class":1073,"line":1146},[1071,2711,1275],{"class":1077},[1071,2713,1143],{"class":1132},[1071,2715,2716,2718,2720],{"class":1073,"line":1156},[1071,2717,1149],{"class":1077},[1071,2719,1082],{"class":1081},[1071,2721,1085],{"class":1077},[1071,2723,2724],{"class":1073,"line":1161},[1071,2725,1117],{"emptyLinePlaceholder":1116},[1071,2727,2728,2730,2733],{"class":1073,"line":1171},[1071,2729,1078],{"class":1077},[1071,2731,2732],{"class":1081},"template",[1071,2734,1085],{"class":1077},[1071,2736,2737,2740],{"class":1073,"line":1193},[1071,2738,2739],{"class":1077},"  \u003C",[1071,2741,2742],{"class":1081},"div\n",[1071,2744,2746,2749,2751,2753,2756],{"class":1073,"line":2745},12,[1071,2747,2748],{"class":2110},"    class",[1071,2750,2114],{"class":1077},[1071,2752,1182],{"class":1102},[1071,2754,2755],{"class":1106},"static",[1071,2757,2758],{"class":1102},"\"\n",[1071,2760,2762,2765,2767,2769,2772],{"class":1073,"line":2761},13,[1071,2763,2764],{"class":2110},"    :class",[1071,2766,2114],{"class":1077},[1071,2768,1182],{"class":1102},[1071,2770,2771],{"class":1106},"{ 'active': isActive, 'text-danger': hasError }",[1071,2773,2758],{"class":1102},[1071,2775,2777,2781],{"class":1073,"line":2776},14,[1071,2778,2780],{"class":2779},"sMKz0","  \u002F",[1071,2782,1085],{"class":1077},[1071,2784,2786,2788,2791,2794,2796,2798,2801,2803,2806],{"class":1073,"line":2785},15,[1071,2787,2739],{"class":1077},[1071,2789,2790],{"class":1081},"div",[1071,2792,2793],{"class":2110}," :class",[1071,2795,2114],{"class":1077},[1071,2797,1182],{"class":1102},[1071,2799,2800],{"class":1106},"classObject",[1071,2802,1182],{"class":1102},[1071,2804,2805],{"class":2779}," \u002F",[1071,2807,1085],{"class":1077},[1071,2809,2811,2813,2815],{"class":1073,"line":2810},16,[1071,2812,1149],{"class":1077},[1071,2814,2732],{"class":1081},[1071,2816,1085],{"class":1077},[1062,2818,2821],{"className":1064,"code":2819,"filename":2820,"language":1067,"meta":354,"style":354},"\u003Cscript setup lang=\"ts\">\nconst isActive = ref(true)\nconst error = ref(null)\n\nconst classObject = computed(() => ({\n  'active': isActive.value && !error.value,\n  'text-danger': error.value && error.value.type === 'fatal',\n}))\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cdiv :class=\"classObject\" \u002F>\n\u003C\u002Ftemplate>\n","Computed",[1039,2822,2823,2843,2859,2877,2881,2903,2936,2977,2984,2992,2996,3004,3024],{"__ignoreMap":354},[1071,2824,2825,2827,2829,2831,2833,2835,2837,2839,2841],{"class":1073,"line":1074},[1071,2826,1078],{"class":1077},[1071,2828,1082],{"class":1081},[1071,2830,2607],{"class":2110},[1071,2832,2111],{"class":2110},[1071,2834,2114],{"class":1077},[1071,2836,1182],{"class":1102},[1071,2838,1226],{"class":1106},[1071,2840,1182],{"class":1102},[1071,2842,1085],{"class":1077},[1071,2844,2845,2847,2849,2851,2853,2855,2857],{"class":1073,"line":1088},[1071,2846,2624],{"class":1933},[1071,2848,2627],{"class":1379},[1071,2850,2630],{"class":1129},[1071,2852,2633],{"class":1239},[1071,2854,1133],{"class":1132},[1071,2856,2638],{"class":2531},[1071,2858,1143],{"class":1132},[1071,2860,2861,2863,2866,2868,2870,2872,2875],{"class":1073,"line":1095},[1071,2862,2624],{"class":1933},[1071,2864,2865],{"class":1379}," error",[1071,2867,2630],{"class":1129},[1071,2869,2633],{"class":1239},[1071,2871,1133],{"class":1132},[1071,2873,2874],{"class":2229},"null",[1071,2876,1143],{"class":1132},[1071,2878,2879],{"class":1073,"line":1113},[1071,2880,1117],{"emptyLinePlaceholder":1116},[1071,2882,2883,2885,2887,2889,2892,2894,2897,2899,2901],{"class":1073,"line":1120},[1071,2884,2624],{"class":1933},[1071,2886,2665],{"class":1379},[1071,2888,2630],{"class":1129},[1071,2890,2891],{"class":1239}," computed",[1071,2893,1133],{"class":1132},[1071,2895,2896],{"class":1077},"()",[1071,2898,1934],{"class":1933},[1071,2900,1966],{"class":1132},[1071,2902,1245],{"class":1077},[1071,2904,2905,2907,2909,2911,2913,2915,2917,2920,2923,2926,2929,2931,2934],{"class":1073,"line":1126},[1071,2906,2679],{"class":1102},[1071,2908,2683],{"class":2682},[1071,2910,1136],{"class":1102},[1071,2912,1254],{"class":1077},[1071,2914,2627],{"class":1132},[1071,2916,1944],{"class":1077},[1071,2918,2919],{"class":1132},"value ",[1071,2921,2922],{"class":1129},"&&",[1071,2924,2925],{"class":1129}," !",[1071,2927,2928],{"class":1132},"error",[1071,2930,1944],{"class":1077},[1071,2932,2933],{"class":1132},"value",[1071,2935,1270],{"class":1077},[1071,2937,2938,2940,2942,2944,2946,2948,2950,2952,2954,2956,2958,2960,2962,2965,2968,2970,2973,2975],{"class":1073,"line":1146},[1071,2939,2679],{"class":1102},[1071,2941,2698],{"class":2682},[1071,2943,1136],{"class":1102},[1071,2945,1254],{"class":1077},[1071,2947,2865],{"class":1132},[1071,2949,1944],{"class":1077},[1071,2951,2919],{"class":1132},[1071,2953,2922],{"class":1129},[1071,2955,2865],{"class":1132},[1071,2957,1944],{"class":1077},[1071,2959,2933],{"class":1132},[1071,2961,1944],{"class":1077},[1071,2963,2964],{"class":1132},"type ",[1071,2966,2967],{"class":1129},"===",[1071,2969,1103],{"class":1102},[1071,2971,2972],{"class":1106},"fatal",[1071,2974,1136],{"class":1102},[1071,2976,1270],{"class":1077},[1071,2978,2979,2981],{"class":1073,"line":1156},[1071,2980,1275],{"class":1077},[1071,2982,2983],{"class":1132},"))\n",[1071,2985,2986,2988,2990],{"class":1073,"line":1161},[1071,2987,1149],{"class":1077},[1071,2989,1082],{"class":1081},[1071,2991,1085],{"class":1077},[1071,2993,2994],{"class":1073,"line":1171},[1071,2995,1117],{"emptyLinePlaceholder":1116},[1071,2997,2998,3000,3002],{"class":1073,"line":1193},[1071,2999,1078],{"class":1077},[1071,3001,2732],{"class":1081},[1071,3003,1085],{"class":1077},[1071,3005,3006,3008,3010,3012,3014,3016,3018,3020,3022],{"class":1073,"line":2745},[1071,3007,2739],{"class":1077},[1071,3009,2790],{"class":1081},[1071,3011,2793],{"class":2110},[1071,3013,2114],{"class":1077},[1071,3015,1182],{"class":1102},[1071,3017,2800],{"class":1106},[1071,3019,1182],{"class":1102},[1071,3021,2805],{"class":2779},[1071,3023,1085],{"class":1077},[1071,3025,3026,3028,3030],{"class":1073,"line":2761},[1071,3027,1149],{"class":1077},[1071,3029,2732],{"class":1081},[1071,3031,1085],{"class":1077},[1062,3033,3036],{"className":1064,"code":3034,"filename":3035,"language":1067,"meta":354,"style":354},"\u003Cscript setup lang=\"ts\">\nconst isActive = ref(true)\nconst errorClass = ref('text-danger')\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cdiv :class=\"[{ active: isActive }, errorClass]\" \u002F>\n\u003C\u002Ftemplate>\n","Array",[1039,3037,3038,3058,3074,3095,3103,3107,3115,3136],{"__ignoreMap":354},[1071,3039,3040,3042,3044,3046,3048,3050,3052,3054,3056],{"class":1073,"line":1074},[1071,3041,1078],{"class":1077},[1071,3043,1082],{"class":1081},[1071,3045,2607],{"class":2110},[1071,3047,2111],{"class":2110},[1071,3049,2114],{"class":1077},[1071,3051,1182],{"class":1102},[1071,3053,1226],{"class":1106},[1071,3055,1182],{"class":1102},[1071,3057,1085],{"class":1077},[1071,3059,3060,3062,3064,3066,3068,3070,3072],{"class":1073,"line":1088},[1071,3061,2624],{"class":1933},[1071,3063,2627],{"class":1379},[1071,3065,2630],{"class":1129},[1071,3067,2633],{"class":1239},[1071,3069,1133],{"class":1132},[1071,3071,2638],{"class":2531},[1071,3073,1143],{"class":1132},[1071,3075,3076,3078,3081,3083,3085,3087,3089,3091,3093],{"class":1073,"line":1095},[1071,3077,2624],{"class":1933},[1071,3079,3080],{"class":1379}," errorClass",[1071,3082,2630],{"class":1129},[1071,3084,2633],{"class":1239},[1071,3086,1133],{"class":1132},[1071,3088,1136],{"class":1102},[1071,3090,2698],{"class":1106},[1071,3092,1136],{"class":1102},[1071,3094,1143],{"class":1132},[1071,3096,3097,3099,3101],{"class":1073,"line":1113},[1071,3098,1149],{"class":1077},[1071,3100,1082],{"class":1081},[1071,3102,1085],{"class":1077},[1071,3104,3105],{"class":1073,"line":1120},[1071,3106,1117],{"emptyLinePlaceholder":1116},[1071,3108,3109,3111,3113],{"class":1073,"line":1126},[1071,3110,1078],{"class":1077},[1071,3112,2732],{"class":1081},[1071,3114,1085],{"class":1077},[1071,3116,3117,3119,3121,3123,3125,3127,3130,3132,3134],{"class":1073,"line":1146},[1071,3118,2739],{"class":1077},[1071,3120,2790],{"class":1081},[1071,3122,2793],{"class":2110},[1071,3124,2114],{"class":1077},[1071,3126,1182],{"class":1102},[1071,3128,3129],{"class":1106},"[{ active: isActive }, errorClass]",[1071,3131,1182],{"class":1102},[1071,3133,2805],{"class":2779},[1071,3135,1085],{"class":1077},[1071,3137,3138,3140,3142],{"class":1073,"line":1156},[1071,3139,1149],{"class":1077},[1071,3141,2732],{"class":1081},[1071,3143,1085],{"class":1077},[1062,3145,3148],{"className":1064,"code":3146,"filename":3147,"language":1067,"meta":354,"style":354},"\u003Cscript setup lang=\"ts\">\nconst activeColor = ref('red')\nconst fontSize = ref(30)\nconst styleObject = reactive({ color: 'red', fontSize: '13px' })\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cdiv :style=\"{ color: activeColor, fontSize: fontSize + 'px' }\" \u002F>\n  \u003Cdiv :style=\"[baseStyles, overridingStyles]\" \u002F>\n  \u003Cdiv :style=\"styleObject\" \u002F>\n\u003C\u002Ftemplate>\n","Style",[1039,3149,3150,3170,3192,3211,3254,3262,3266,3274,3296,3317,3338],{"__ignoreMap":354},[1071,3151,3152,3154,3156,3158,3160,3162,3164,3166,3168],{"class":1073,"line":1074},[1071,3153,1078],{"class":1077},[1071,3155,1082],{"class":1081},[1071,3157,2607],{"class":2110},[1071,3159,2111],{"class":2110},[1071,3161,2114],{"class":1077},[1071,3163,1182],{"class":1102},[1071,3165,1226],{"class":1106},[1071,3167,1182],{"class":1102},[1071,3169,1085],{"class":1077},[1071,3171,3172,3174,3177,3179,3181,3183,3185,3188,3190],{"class":1073,"line":1088},[1071,3173,2624],{"class":1933},[1071,3175,3176],{"class":1379}," activeColor",[1071,3178,2630],{"class":1129},[1071,3180,2633],{"class":1239},[1071,3182,1133],{"class":1132},[1071,3184,1136],{"class":1102},[1071,3186,3187],{"class":1106},"red",[1071,3189,1136],{"class":1102},[1071,3191,1143],{"class":1132},[1071,3193,3194,3196,3199,3201,3203,3205,3209],{"class":1073,"line":1095},[1071,3195,2624],{"class":1933},[1071,3197,3198],{"class":1379}," fontSize",[1071,3200,2630],{"class":1129},[1071,3202,2633],{"class":1239},[1071,3204,1133],{"class":1132},[1071,3206,3208],{"class":3207},"sOUxV","30",[1071,3210,1143],{"class":1132},[1071,3212,3213,3215,3218,3220,3222,3224,3226,3229,3231,3233,3235,3237,3239,3241,3243,3245,3248,3250,3252],{"class":1073,"line":1113},[1071,3214,2624],{"class":1933},[1071,3216,3217],{"class":1379}," styleObject",[1071,3219,2630],{"class":1129},[1071,3221,2670],{"class":1239},[1071,3223,1133],{"class":1132},[1071,3225,1738],{"class":1077},[1071,3227,3228],{"class":1250}," color",[1071,3230,1254],{"class":1077},[1071,3232,1103],{"class":1102},[1071,3234,3187],{"class":1106},[1071,3236,1136],{"class":1102},[1071,3238,1449],{"class":1077},[1071,3240,3198],{"class":1250},[1071,3242,1254],{"class":1077},[1071,3244,1103],{"class":1102},[1071,3246,3247],{"class":1106},"13px",[1071,3249,1136],{"class":1102},[1071,3251,1767],{"class":1077},[1071,3253,1143],{"class":1132},[1071,3255,3256,3258,3260],{"class":1073,"line":1120},[1071,3257,1149],{"class":1077},[1071,3259,1082],{"class":1081},[1071,3261,1085],{"class":1077},[1071,3263,3264],{"class":1073,"line":1126},[1071,3265,1117],{"emptyLinePlaceholder":1116},[1071,3267,3268,3270,3272],{"class":1073,"line":1146},[1071,3269,1078],{"class":1077},[1071,3271,2732],{"class":1081},[1071,3273,1085],{"class":1077},[1071,3275,3276,3278,3280,3283,3285,3287,3290,3292,3294],{"class":1073,"line":1156},[1071,3277,2739],{"class":1077},[1071,3279,2790],{"class":1081},[1071,3281,3282],{"class":2110}," :style",[1071,3284,2114],{"class":1077},[1071,3286,1182],{"class":1102},[1071,3288,3289],{"class":1106},"{ color: activeColor, fontSize: fontSize + 'px' }",[1071,3291,1182],{"class":1102},[1071,3293,2805],{"class":2779},[1071,3295,1085],{"class":1077},[1071,3297,3298,3300,3302,3304,3306,3308,3311,3313,3315],{"class":1073,"line":1161},[1071,3299,2739],{"class":1077},[1071,3301,2790],{"class":1081},[1071,3303,3282],{"class":2110},[1071,3305,2114],{"class":1077},[1071,3307,1182],{"class":1102},[1071,3309,3310],{"class":1106},"[baseStyles, overridingStyles]",[1071,3312,1182],{"class":1102},[1071,3314,2805],{"class":2779},[1071,3316,1085],{"class":1077},[1071,3318,3319,3321,3323,3325,3327,3329,3332,3334,3336],{"class":1073,"line":1171},[1071,3320,2739],{"class":1077},[1071,3322,2790],{"class":1081},[1071,3324,3282],{"class":2110},[1071,3326,2114],{"class":1077},[1071,3328,1182],{"class":1102},[1071,3330,3331],{"class":1106},"styleObject",[1071,3333,1182],{"class":1102},[1071,3335,2805],{"class":2779},[1071,3337,1085],{"class":1077},[1071,3339,3340,3342,3344],{"class":1073,"line":1193},[1071,3341,1149],{"class":1077},[1071,3343,2732],{"class":1081},[1071,3345,1085],{"class":1077},[1024,3347,3348,3349,1043],{},"更多信息请参阅 ",[1036,3350,2582],{"href":3351,"rel":3352},"https:\u002F\u002Fvuejs.org\u002Fguide\u002Fessentials\u002Fclass-and-style",[1056],[1045,3354,3356,3357,3360,3361,3363],{"id":3355},"使用-v-bind-的动态样式dynamic-styles-with-v-bind","使用 ",[1039,3358,3359],{},"v-bind"," 的动态样式（Dynamic Styles With ",[1039,3362,3359],{},"）",[1024,3365,3366],{},"你可以在 style 块中使用 v-bind 函数引用 JavaScript 变量和表达式。\n该绑定是动态的，也就是说，如果变量的值发生变化，样式也会随之更新。",[1062,3368,3370],{"className":1064,"code":3369,"language":1067,"meta":354,"style":354},"\u003Cscript setup lang=\"ts\">\nconst color = ref('red')\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cdiv class=\"text\">\n    hello\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cstyle>\n.text {\n  color: v-bind(color);\n}\n\u003C\u002Fstyle>\n",[1039,3371,3372,3392,3412,3420,3424,3432,3452,3457,3466,3474,3478,3486,3495,3512,3516],{"__ignoreMap":354},[1071,3373,3374,3376,3378,3380,3382,3384,3386,3388,3390],{"class":1073,"line":1074},[1071,3375,1078],{"class":1077},[1071,3377,1082],{"class":1081},[1071,3379,2607],{"class":2110},[1071,3381,2111],{"class":2110},[1071,3383,2114],{"class":1077},[1071,3385,1182],{"class":1102},[1071,3387,1226],{"class":1106},[1071,3389,1182],{"class":1102},[1071,3391,1085],{"class":1077},[1071,3393,3394,3396,3398,3400,3402,3404,3406,3408,3410],{"class":1073,"line":1088},[1071,3395,2624],{"class":1933},[1071,3397,3228],{"class":1379},[1071,3399,2630],{"class":1129},[1071,3401,2633],{"class":1239},[1071,3403,1133],{"class":1132},[1071,3405,1136],{"class":1102},[1071,3407,3187],{"class":1106},[1071,3409,1136],{"class":1102},[1071,3411,1143],{"class":1132},[1071,3413,3414,3416,3418],{"class":1073,"line":1095},[1071,3415,1149],{"class":1077},[1071,3417,1082],{"class":1081},[1071,3419,1085],{"class":1077},[1071,3421,3422],{"class":1073,"line":1113},[1071,3423,1117],{"emptyLinePlaceholder":1116},[1071,3425,3426,3428,3430],{"class":1073,"line":1120},[1071,3427,1078],{"class":1077},[1071,3429,2732],{"class":1081},[1071,3431,1085],{"class":1077},[1071,3433,3434,3436,3438,3441,3443,3445,3448,3450],{"class":1073,"line":1126},[1071,3435,2739],{"class":1077},[1071,3437,2790],{"class":1081},[1071,3439,3440],{"class":2110}," class",[1071,3442,2114],{"class":1077},[1071,3444,1182],{"class":1102},[1071,3446,3447],{"class":1106},"text",[1071,3449,1182],{"class":1102},[1071,3451,1085],{"class":1077},[1071,3453,3454],{"class":1073,"line":1146},[1071,3455,3456],{"class":1132},"    hello\n",[1071,3458,3459,3462,3464],{"class":1073,"line":1156},[1071,3460,3461],{"class":1077},"  \u003C\u002F",[1071,3463,2790],{"class":1081},[1071,3465,1085],{"class":1077},[1071,3467,3468,3470,3472],{"class":1073,"line":1161},[1071,3469,1149],{"class":1077},[1071,3471,2732],{"class":1081},[1071,3473,1085],{"class":1077},[1071,3475,3476],{"class":1073,"line":1171},[1071,3477,1117],{"emptyLinePlaceholder":1116},[1071,3479,3480,3482,3484],{"class":1073,"line":1193},[1071,3481,1078],{"class":1077},[1071,3483,1166],{"class":1081},[1071,3485,1085],{"class":1077},[1071,3487,3488,3491,3493],{"class":1073,"line":2745},[1071,3489,1944],{"class":3490},"szLpQ",[1071,3492,3447],{"class":1494},[1071,3494,1316],{"class":1077},[1071,3496,3497,3500,3502,3505,3508,3510],{"class":1073,"line":2761},[1071,3498,3499],{"class":1321},"  color",[1071,3501,1254],{"class":1077},[1071,3503,3504],{"class":1132}," v-bind(",[1071,3506,3507],{"class":1379},"color",[1071,3509,1355],{"class":1132},[1071,3511,1334],{"class":1077},[1071,3513,3514],{"class":1073,"line":2776},[1071,3515,1410],{"class":1077},[1071,3517,3518,3520,3522],{"class":1073,"line":2785},[1071,3519,1149],{"class":1077},[1071,3521,1166],{"class":1081},[1071,3523,1085],{"class":1077},[1045,3525,3527],{"id":3526},"作用域样式scoped-styles","作用域样式（Scoped Styles）",[1024,3529,3530],{},"scoped 属性允许你以隔离的方式为组件添加样式。使用该属性声明的样式只会应用于当前组件。",[1062,3532,3534],{"className":1064,"code":3533,"language":1067,"meta":354,"style":354},"\u003Ctemplate>\n  \u003Cdiv class=\"example\">\n    hi\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cstyle scoped>\n.example {\n  color: red;\n}\n\u003C\u002Fstyle>\n",[1039,3535,3536,3544,3563,3568,3576,3584,3588,3599,3607,3618,3622],{"__ignoreMap":354},[1071,3537,3538,3540,3542],{"class":1073,"line":1074},[1071,3539,1078],{"class":1077},[1071,3541,2732],{"class":1081},[1071,3543,1085],{"class":1077},[1071,3545,3546,3548,3550,3552,3554,3556,3559,3561],{"class":1073,"line":1088},[1071,3547,2739],{"class":1077},[1071,3549,2790],{"class":1081},[1071,3551,3440],{"class":2110},[1071,3553,2114],{"class":1077},[1071,3555,1182],{"class":1102},[1071,3557,3558],{"class":1106},"example",[1071,3560,1182],{"class":1102},[1071,3562,1085],{"class":1077},[1071,3564,3565],{"class":1073,"line":1095},[1071,3566,3567],{"class":1132},"    hi\n",[1071,3569,3570,3572,3574],{"class":1073,"line":1113},[1071,3571,3461],{"class":1077},[1071,3573,2790],{"class":1081},[1071,3575,1085],{"class":1077},[1071,3577,3578,3580,3582],{"class":1073,"line":1120},[1071,3579,1149],{"class":1077},[1071,3581,2732],{"class":1081},[1071,3583,1085],{"class":1077},[1071,3585,3586],{"class":1073,"line":1126},[1071,3587,1117],{"emptyLinePlaceholder":1116},[1071,3589,3590,3592,3594,3597],{"class":1073,"line":1146},[1071,3591,1078],{"class":1077},[1071,3593,1166],{"class":1081},[1071,3595,3596],{"class":2110}," scoped",[1071,3598,1085],{"class":1077},[1071,3600,3601,3603,3605],{"class":1073,"line":1156},[1071,3602,1944],{"class":3490},[1071,3604,3558],{"class":1494},[1071,3606,1316],{"class":1077},[1071,3608,3609,3611,3613,3616],{"class":1073,"line":1161},[1071,3610,3499],{"class":1321},[1071,3612,1254],{"class":1077},[1071,3614,3615],{"class":1379}," red",[1071,3617,1334],{"class":1077},[1071,3619,3620],{"class":1073,"line":1171},[1071,3621,1410],{"class":1077},[1071,3623,3624,3626,3628],{"class":1073,"line":1193},[1071,3625,1149],{"class":1077},[1071,3627,1166],{"class":1081},[1071,3629,1085],{"class":1077},[1045,3631,3633],{"id":3632},"css-modules","CSS Modules",[1024,3635,3636,3637,3641,3642,3645],{},"你可以使用 ",[1036,3638,3633],{"href":3639,"rel":3640},"https:\u002F\u002Fgithub.com\u002Fcss-modules\u002Fcss-modules",[1056]," 及其 module 属性。通过注入的 ",[1039,3643,3644],{},"$style"," 变量访问它。",[1062,3647,3649],{"className":1064,"code":3648,"language":1067,"meta":354,"style":354},"\u003Ctemplate>\n  \u003Cp :class=\"$style.red\">\n    This should be red\n  \u003C\u002Fp>\n\u003C\u002Ftemplate>\n\n\u003Cstyle module>\n.red {\n  color: red;\n}\n\u003C\u002Fstyle>\n",[1039,3650,3651,3659,3678,3683,3691,3699,3703,3714,3722,3732,3736],{"__ignoreMap":354},[1071,3652,3653,3655,3657],{"class":1073,"line":1074},[1071,3654,1078],{"class":1077},[1071,3656,2732],{"class":1081},[1071,3658,1085],{"class":1077},[1071,3660,3661,3663,3665,3667,3669,3671,3674,3676],{"class":1073,"line":1088},[1071,3662,2739],{"class":1077},[1071,3664,1024],{"class":1081},[1071,3666,2793],{"class":2110},[1071,3668,2114],{"class":1077},[1071,3670,1182],{"class":1102},[1071,3672,3673],{"class":1106},"$style.red",[1071,3675,1182],{"class":1102},[1071,3677,1085],{"class":1077},[1071,3679,3680],{"class":1073,"line":1095},[1071,3681,3682],{"class":1132},"    This should be red\n",[1071,3684,3685,3687,3689],{"class":1073,"line":1113},[1071,3686,3461],{"class":1077},[1071,3688,1024],{"class":1081},[1071,3690,1085],{"class":1077},[1071,3692,3693,3695,3697],{"class":1073,"line":1120},[1071,3694,1149],{"class":1077},[1071,3696,2732],{"class":1081},[1071,3698,1085],{"class":1077},[1071,3700,3701],{"class":1073,"line":1126},[1071,3702,1117],{"emptyLinePlaceholder":1116},[1071,3704,3705,3707,3709,3712],{"class":1073,"line":1146},[1071,3706,1078],{"class":1077},[1071,3708,1166],{"class":1081},[1071,3710,3711],{"class":2110}," module",[1071,3713,1085],{"class":1077},[1071,3715,3716,3718,3720],{"class":1073,"line":1156},[1071,3717,1944],{"class":3490},[1071,3719,3187],{"class":1494},[1071,3721,1316],{"class":1077},[1071,3723,3724,3726,3728,3730],{"class":1073,"line":1161},[1071,3725,3499],{"class":1321},[1071,3727,1254],{"class":1077},[1071,3729,3615],{"class":1379},[1071,3731,1334],{"class":1077},[1071,3733,3734],{"class":1073,"line":1171},[1071,3735,1410],{"class":1077},[1071,3737,3738,3740,3742],{"class":1073,"line":1193},[1071,3739,1149],{"class":1077},[1071,3741,1166],{"class":1081},[1071,3743,1085],{"class":1077},[1045,3745,3747],{"id":3746},"预处理器支持preprocessors-support","预处理器支持（Preprocessors Support）",[1024,3749,3750,3751,3754,3755,3754,3758,3754,3761,3764,3765,3768],{},"SFC 的 style 块支持预处理器语法。Vite 内置支持 ",[1039,3752,3753],{},".scss","、",[1039,3756,3757],{},".sass",[1039,3759,3760],{},".less",[1039,3762,3763],{},".styl"," 和 ",[1039,3766,3767],{},".stylus"," 文件，无需配置。你只需先安装它们，它们就能在 SFC 中通过 lang 属性直接使用。",[1479,3770,3771,3807,3844,3882],{},[1062,3772,3774],{"className":1064,"code":3773,"filename":2280,"language":1067,"meta":354,"style":354},"\u003Cstyle lang=\"scss\">\n  \u002F* Write scss here *\u002F\n\u003C\u002Fstyle>\n",[1039,3775,3776,3794,3799],{"__ignoreMap":354},[1071,3777,3778,3780,3782,3784,3786,3788,3790,3792],{"class":1073,"line":1074},[1071,3779,1078],{"class":1077},[1071,3781,1166],{"class":1081},[1071,3783,2111],{"class":2110},[1071,3785,2114],{"class":1077},[1071,3787,1182],{"class":1102},[1071,3789,2119],{"class":1106},[1071,3791,1182],{"class":1102},[1071,3793,1085],{"class":1077},[1071,3795,3796],{"class":1073,"line":1088},[1071,3797,3798],{"class":1132},"  \u002F* Write scss here *\u002F\n",[1071,3800,3801,3803,3805],{"class":1073,"line":1095},[1071,3802,1149],{"class":1077},[1071,3804,1166],{"class":1081},[1071,3806,1085],{"class":1077},[1062,3808,3811],{"className":1064,"code":3809,"filename":3810,"language":1067,"meta":354,"style":354},"\u003Cstyle lang=\"sass\">\n  \u002F* Write sass here *\u002F\n\u003C\u002Fstyle>\n","Sass",[1039,3812,3813,3831,3836],{"__ignoreMap":354},[1071,3814,3815,3817,3819,3821,3823,3825,3827,3829],{"class":1073,"line":1074},[1071,3816,1078],{"class":1077},[1071,3818,1166],{"class":1081},[1071,3820,2111],{"class":2110},[1071,3822,2114],{"class":1077},[1071,3824,1182],{"class":1102},[1071,3826,2255],{"class":1106},[1071,3828,1182],{"class":1102},[1071,3830,1085],{"class":1077},[1071,3832,3833],{"class":1073,"line":1088},[1071,3834,3835],{"class":1132},"  \u002F* Write sass here *\u002F\n",[1071,3837,3838,3840,3842],{"class":1073,"line":1095},[1071,3839,1149],{"class":1077},[1071,3841,1166],{"class":1081},[1071,3843,1085],{"class":1077},[1062,3845,3848],{"className":1064,"code":3846,"filename":3847,"language":1067,"meta":354,"style":354},"\u003Cstyle lang=\"less\">\n  \u002F* Write less here *\u002F\n\u003C\u002Fstyle>\n","LESS",[1039,3849,3850,3869,3874],{"__ignoreMap":354},[1071,3851,3852,3854,3856,3858,3860,3862,3865,3867],{"class":1073,"line":1074},[1071,3853,1078],{"class":1077},[1071,3855,1166],{"class":1081},[1071,3857,2111],{"class":2110},[1071,3859,2114],{"class":1077},[1071,3861,1182],{"class":1102},[1071,3863,3864],{"class":1106},"less",[1071,3866,1182],{"class":1102},[1071,3868,1085],{"class":1077},[1071,3870,3871],{"class":1073,"line":1088},[1071,3872,3873],{"class":1132},"  \u002F* Write less here *\u002F\n",[1071,3875,3876,3878,3880],{"class":1073,"line":1095},[1071,3877,1149],{"class":1077},[1071,3879,1166],{"class":1081},[1071,3881,1085],{"class":1077},[1062,3883,3885],{"className":1064,"code":3884,"filename":2072,"language":1067,"meta":354,"style":354},"\u003Cstyle lang=\"stylus\">\n  \u002F* Write stylus here *\u002F\n\u003C\u002Fstyle>\n",[1039,3886,3887,3906,3911],{"__ignoreMap":354},[1071,3888,3889,3891,3893,3895,3897,3899,3902,3904],{"class":1073,"line":1074},[1071,3890,1078],{"class":1077},[1071,3892,1166],{"class":1081},[1071,3894,2111],{"class":2110},[1071,3896,2114],{"class":1077},[1071,3898,1182],{"class":1102},[1071,3900,3901],{"class":1106},"stylus",[1071,3903,1182],{"class":1102},[1071,3905,1085],{"class":1077},[1071,3907,3908],{"class":1073,"line":1088},[1071,3909,3910],{"class":1132},"  \u002F* Write stylus here *\u002F\n",[1071,3912,3913,3915,3917],{"class":1073,"line":1095},[1071,3914,1149],{"class":1077},[1071,3916,1166],{"class":1081},[1071,3918,1085],{"class":1077},[1024,3920,2577,3921,3764,3926,3931,3932,1043],{},[1036,3922,3925],{"href":3923,"rel":3924},"https:\u002F\u002Fvite.dev\u002Fguide\u002Ffeatures#css",[1056],"Vite CSS 文档",[1036,3927,3930],{"href":3928,"rel":3929},"https:\u002F\u002Fgithub.com\u002Fvitejs\u002Fvite-plugin-vue\u002Ftree\u002Fmain\u002Fpackages\u002Fplugin-vue",[1056],"@vitejs\u002Fplugin-vue 文档","。\n对于 webpack 用户，请参阅 ",[1036,3933,3936],{"href":3934,"rel":3935},"https:\u002F\u002Fvue-loader.vuejs.org",[1056],"vue loader 文档",[1028,3938,3940],{"id":3939},"使用-postcssusing-postcss","使用 PostCSS（Using PostCSS）",[1024,3942,3943,3944,3946],{},"Nuxt 内置了 postcss。你可以在 ",[1039,3945,2273],{}," 文件中进行配置。",[1062,3948,3950],{"className":1224,"code":3949,"filename":174,"language":1226,"meta":354,"style":354},"export default defineNuxtConfig({\n  postcss: {\n    plugins: {\n      'postcss-nested': {},\n      'postcss-custom-media': {},\n    },\n  },\n})\n",[1039,3951,3952,3964,3973,3982,3997,4010,4014,4018],{"__ignoreMap":354},[1071,3953,3954,3956,3958,3960,3962],{"class":1073,"line":1074},[1071,3955,1233],{"class":1098},[1071,3957,1236],{"class":1098},[1071,3959,1240],{"class":1239},[1071,3961,1133],{"class":1132},[1071,3963,1245],{"class":1077},[1071,3965,3966,3969,3971],{"class":1073,"line":1088},[1071,3967,3968],{"class":1250},"  postcss",[1071,3970,1254],{"class":1077},[1071,3972,1316],{"class":1077},[1071,3974,3975,3978,3980],{"class":1073,"line":1095},[1071,3976,3977],{"class":1250},"    plugins",[1071,3979,1254],{"class":1077},[1071,3981,1316],{"class":1077},[1071,3983,3984,3987,3990,3992,3994],{"class":1073,"line":1113},[1071,3985,3986],{"class":1102},"      '",[1071,3988,3989],{"class":2682},"postcss-nested",[1071,3991,1136],{"class":1102},[1071,3993,1254],{"class":1077},[1071,3995,3996],{"class":1077}," {},\n",[1071,3998,3999,4001,4004,4006,4008],{"class":1073,"line":1120},[1071,4000,3986],{"class":1102},[1071,4002,4003],{"class":2682},"postcss-custom-media",[1071,4005,1136],{"class":1102},[1071,4007,1254],{"class":1077},[1071,4009,3996],{"class":1077},[1071,4011,4012],{"class":1073,"line":1126},[1071,4013,1776],{"class":1077},[1071,4015,4016],{"class":1073,"line":1146},[1071,4017,1781],{"class":1077},[1071,4019,4020,4022],{"class":1073,"line":1156},[1071,4021,1275],{"class":1077},[1071,4023,1143],{"class":1132},[1024,4025,4026],{},"为了在 SFC 中获得正确的语法高亮，你可以使用 postcss lang 属性。",[1062,4028,4030],{"className":1064,"code":4029,"language":1067,"meta":354,"style":354},"\u003Cstyle lang=\"postcss\">\n  \u002F* Write postcss here *\u002F\n\u003C\u002Fstyle>\n",[1039,4031,4032,4051,4056],{"__ignoreMap":354},[1071,4033,4034,4036,4038,4040,4042,4044,4047,4049],{"class":1073,"line":1074},[1071,4035,1078],{"class":1077},[1071,4037,1166],{"class":1081},[1071,4039,2111],{"class":2110},[1071,4041,2114],{"class":1077},[1071,4043,1182],{"class":1102},[1071,4045,4046],{"class":1106},"postcss",[1071,4048,1182],{"class":1102},[1071,4050,1085],{"class":1077},[1071,4052,4053],{"class":1073,"line":1088},[1071,4054,4055],{"class":1132},"  \u002F* Write postcss here *\u002F\n",[1071,4057,4058,4060,4062],{"class":1073,"line":1095},[1071,4059,1149],{"class":1077},[1071,4061,1166],{"class":1081},[1071,4063,1085],{"class":1077},[1024,4065,4066],{},"默认情况下，Nuxt 已经预配置了以下插件：",[4068,4069,4070,4082,4092,4100],"ul",{},[4071,4072,4073,4078,4079,4081],"li",{},[1036,4074,4077],{"href":4075,"rel":4076},"https:\u002F\u002Fgithub.com\u002Fpostcss\u002Fpostcss-import",[1056],"postcss-import","：改进 ",[1039,4080,1059],{}," 规则",[4071,4083,4084,4089,4090,1060],{},[1036,4085,4088],{"href":4086,"rel":4087},"https:\u002F\u002Fgithub.com\u002Fpostcss\u002Fpostcss-url",[1056],"postcss-url","：转换 ",[1039,4091,1300],{},[4071,4093,4094,4099],{},[1036,4095,4098],{"href":4096,"rel":4097},"https:\u002F\u002Fgithub.com\u002Fpostcss\u002Fautoprefixer",[1056],"autoprefixer","：自动添加浏览器厂商前缀",[4071,4101,4102,4107],{},[1036,4103,4106],{"href":4104,"rel":4105},"https:\u002F\u002Fcssnano.github.io\u002Fcssnano\u002F",[1056],"cssnano","：压缩与清除",[1028,4109,4111],{"id":4110},"利用布局实现多套样式leveraging-layouts-for-multiple-styles","利用布局实现多套样式（Leveraging Layouts For Multiple Styles）",[1024,4113,4114],{},"如果你需要为应用的不同部分使用完全不同的样式，可以使用布局。\n为不同的布局使用不同的样式。",[1062,4116,4118],{"className":1064,"code":4117,"language":1067,"meta":354,"style":354},"\u003Ctemplate>\n  \u003Cdiv class=\"default-layout\">\n    \u003Ch1>Default Layout\u003C\u002Fh1>\n    \u003Cslot \u002F>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cstyle>\n.default-layout {\n  color: red;\n}\n\u003C\u002Fstyle>\n",[1039,4119,4120,4128,4147,4166,4177,4185,4193,4197,4205,4213,4223,4227],{"__ignoreMap":354},[1071,4121,4122,4124,4126],{"class":1073,"line":1074},[1071,4123,1078],{"class":1077},[1071,4125,2732],{"class":1081},[1071,4127,1085],{"class":1077},[1071,4129,4130,4132,4134,4136,4138,4140,4143,4145],{"class":1073,"line":1088},[1071,4131,2739],{"class":1077},[1071,4133,2790],{"class":1081},[1071,4135,3440],{"class":2110},[1071,4137,2114],{"class":1077},[1071,4139,1182],{"class":1102},[1071,4141,4142],{"class":1106},"default-layout",[1071,4144,1182],{"class":1102},[1071,4146,1085],{"class":1077},[1071,4148,4149,4152,4154,4157,4160,4162,4164],{"class":1073,"line":1095},[1071,4150,4151],{"class":1077},"    \u003C",[1071,4153,1432],{"class":1081},[1071,4155,4156],{"class":1077},">",[1071,4158,4159],{"class":1132},"Default Layout",[1071,4161,1149],{"class":1077},[1071,4163,1432],{"class":1081},[1071,4165,1085],{"class":1077},[1071,4167,4168,4170,4173,4175],{"class":1073,"line":1113},[1071,4169,4151],{"class":1077},[1071,4171,4172],{"class":1081},"slot",[1071,4174,2805],{"class":2779},[1071,4176,1085],{"class":1077},[1071,4178,4179,4181,4183],{"class":1073,"line":1120},[1071,4180,3461],{"class":1077},[1071,4182,2790],{"class":1081},[1071,4184,1085],{"class":1077},[1071,4186,4187,4189,4191],{"class":1073,"line":1126},[1071,4188,1149],{"class":1077},[1071,4190,2732],{"class":1081},[1071,4192,1085],{"class":1077},[1071,4194,4195],{"class":1073,"line":1146},[1071,4196,1117],{"emptyLinePlaceholder":1116},[1071,4198,4199,4201,4203],{"class":1073,"line":1156},[1071,4200,1078],{"class":1077},[1071,4202,1166],{"class":1081},[1071,4204,1085],{"class":1077},[1071,4206,4207,4209,4211],{"class":1073,"line":1161},[1071,4208,1944],{"class":3490},[1071,4210,4142],{"class":1494},[1071,4212,1316],{"class":1077},[1071,4214,4215,4217,4219,4221],{"class":1073,"line":1171},[1071,4216,3499],{"class":1321},[1071,4218,1254],{"class":1077},[1071,4220,3615],{"class":1379},[1071,4222,1334],{"class":1077},[1071,4224,4225],{"class":1073,"line":1193},[1071,4226,1410],{"class":1077},[1071,4228,4229,4231,4233],{"class":1073,"line":2745},[1071,4230,1149],{"class":1077},[1071,4232,1166],{"class":1081},[1071,4234,1085],{"class":1077},[1796,4236],{"to":97},[1028,4238,4240],{"id":4239},"第三方库与模块third-party-libraries-and-modules","第三方库与模块（Third Party Libraries And Modules）",[1024,4242,4243,4244,4249,4250,1043],{},"Nuxt 在样式方面不做限定，为你提供了丰富多样的选择。你可以使用任何你喜欢的样式工具，例如流行的库 ",[1036,4245,4248],{"href":4246,"rel":4247},"https:\u002F\u002Funocss.dev",[1056],"UnoCSS"," 或 ",[1036,4251,4254],{"href":4252,"rel":4253},"https:\u002F\u002Ftailwindcss.com",[1056],"Tailwind CSS",[1024,4256,4257,4258,4262],{},"社区和 Nuxt 团队开发了大量 Nuxt 模块，让集成更轻松。\n你可以在网站的 ",[1036,4259,4261],{"href":4260},"\u002Fmodules","模块章节"," 中发现它们。\n以下是一些帮助你入门的模块：",[4068,4264,4265,4271,4277,4285,4292,4300],{},[4071,4266,4267,4270],{},[1036,4268,4248],{"href":4269},"\u002Fmodules\u002Funocss","：即时按需的原子化 CSS 引擎",[4071,4272,4273,4276],{},[1036,4274,4254],{"href":4275},"\u002Fmodules\u002Ftailwindcss","：实用优先（utility-first）的 CSS 框架",[4071,4278,4279,4284],{},[1036,4280,4283],{"href":4281,"rel":4282},"https:\u002F\u002Fgithub.com\u002Fnuxt-modules\u002Ffontaine",[1056],"Fontaine","：字体度量回退（font metric fallback）",[4071,4286,4287,4291],{},[1036,4288,4290],{"href":2572,"rel":4289},[1056],"Pinceau","：可适配的样式框架",[4071,4293,4294,4299],{},[1036,4295,4298],{"href":4296,"rel":4297},"https:\u002F\u002Fui.nuxt.com",[1056],"Nuxt UI","：面向现代 Web 应用的 UI 库",[4071,4301,4302,4307],{},[1036,4303,4306],{"href":4304,"rel":4305},"https:\u002F\u002Fpanda-css.com\u002Fdocs\u002Finstallation\u002Fnuxt",[1056],"Panda CSS","：在构建时生成原子化 CSS 的 CSS-in-JS 引擎",[1024,4309,4310,4311,4314,4315,4318,4319,4322],{},"Nuxt 模块开箱即用地为你提供良好的开发者体验，但请记住：如果你喜欢的工具没有对应的模块，并不意味着你不能在 Nuxt 中使用它！你可以为自己的项目自行配置。根据工具的不同，你可能需要使用 ",[1036,4312,4313],{"href":109},"Nuxt 插件"," 和\u002F或",[1036,4316,4317],{"href":285},"编写自己的模块","。如果愿意，欢迎与",[1036,4320,4321],{"href":4260},"社区","分享它们！",[1045,4324,4326],{"id":4325},"轻松加载-web-字体easily-load-webfonts","轻松加载 Web 字体（Easily Load Webfonts）",[1024,4328,3636,4329,4334],{},[1036,4330,4333],{"href":4331,"rel":4332},"https:\u002F\u002Fgithub.com\u002Fnuxt-modules\u002Fgoogle-fonts",[1056],"Nuxt Google Fonts 模块"," 来加载 Google Fonts。",[1024,4336,4337,4338,4342,4343,4348],{},"如果你在使用 ",[1036,4339,4248],{"href":4340,"rel":4341},"https:\u002F\u002Funocss.dev\u002Fintegrations\u002Fnuxt",[1056],"，请注意它自带 ",[1036,4344,4347],{"href":4345,"rel":4346},"https:\u002F\u002Funocss.dev\u002Fpresets\u002Fweb-fonts",[1056],"web fonts presets","，可方便地从常见提供商（包括 Google Fonts 等）加载字体。",[1028,4350,4352],{"id":4351},"进阶advanced","进阶（Advanced）",[1045,4354,4356],{"id":4355},"过渡transitions","过渡（Transitions）",[1024,4358,4359,4360,4363,4364,1043],{},"Nuxt 自带与 Vue 相同的 ",[1039,4361,4362],{},"\u003CTransition>"," 元素，并且支持实验性的 ",[1036,4365,4367],{"href":4366},"\u002Fdocs\u002Fgetting-started\u002Ftransitions#view-transitions-api-experimental","View Transitions API",[1796,4369],{"to":37},[1045,4371,4373],{"id":4372},"字体高级优化font-advanced-optimization","字体高级优化（Font Advanced Optimization）",[1024,4375,4376,4377,4380,4381,4386],{},"我们建议使用 ",[1036,4378,4283],{"href":4281,"rel":4379},[1056]," 来减少你的 ",[1036,4382,4385],{"href":4383,"rel":4384},"https:\u002F\u002Fweb.dev\u002Farticles\u002Fcls",[1056],"CLS","。如果你需要更高级的方案，可以考虑创建一个 Nuxt 模块来扩展构建过程或 Nuxt 运行时。",[1201,4388,4389],{},[1024,4390,4391],{},"请始终记得善用 Web 生态中各种可用的工具与技术，让你为应用添加样式更轻松、更高效。无论你使用的是原生 CSS、预处理器、postcss、UI 库还是模块，Nuxt 都能满足你的需求。祝你样式愉快！",[1045,4393,4395],{"id":4394},"lcp-高级优化lcp-advanced-optimizations","LCP 高级优化（LCP Advanced Optimizations）",[1024,4397,4398],{},"你可以采取以下措施来加速全局 CSS 文件的下载：",[4068,4400,4401,4404,4407,4410],{},[4071,4402,4403],{},"使用 CDN，让文件在物理上更靠近你的用户",[4071,4405,4406],{},"压缩你的资源，最好使用 Brotli",[4071,4408,4409],{},"使用 HTTP2\u002FHTTP3 进行传输",[4071,4411,4412],{},"将资源托管在同一个域名下（不要使用不同的子域名）",[1024,4414,4415,4416,4420],{},"如果你使用的是 Cloudflare、Netlify 或 Vercel 等现代平台，大多数事情都会自动为你完成。\n你可以在 ",[1036,4417,2022],{"href":4418,"rel":4419},"https:\u002F\u002Fweb.dev\u002Farticles\u002Foptimize-lcp",[1056]," 上找到 LCP 优化指南。",[1024,4422,4423],{},"如果 Nuxt 内联了你的所有 CSS，你可以（实验性地）完全阻止外部 CSS 文件被引用到渲染后的 HTML 中。\n你可以通过一个 hook 来实现这一点，它可以放在模块中，也可以放在 Nuxt 配置文件中。",[1062,4425,4427],{"className":1224,"code":4426,"filename":174,"language":1226,"meta":354,"style":354},"export default defineNuxtConfig({\n  hooks: {\n    'build:manifest': (manifest) => {\n      \u002F\u002F find the app entry, css list\n      const css = Object.values(manifest).find(options => options.isEntry)?.css\n      if (css) {\n        \u002F\u002F start from the end of the array and go to the beginning\n        for (let i = css.length - 1; i >= 0; i--) {\n          \u002F\u002F if it starts with 'entry', remove it from the list\n          if (css[i].startsWith('entry')) {\n            css.splice(i, 1)\n          }\n        }\n      }\n    },\n  },\n})\n",[1039,4428,4429,4441,4450,4473,4478,4530,4544,4549,4599,4604,4640,4660,4665,4670,4675,4679,4683],{"__ignoreMap":354},[1071,4430,4431,4433,4435,4437,4439],{"class":1073,"line":1074},[1071,4432,1233],{"class":1098},[1071,4434,1236],{"class":1098},[1071,4436,1240],{"class":1239},[1071,4438,1133],{"class":1132},[1071,4440,1245],{"class":1077},[1071,4442,4443,4446,4448],{"class":1073,"line":1088},[1071,4444,4445],{"class":1250},"  hooks",[1071,4447,1254],{"class":1077},[1071,4449,1316],{"class":1077},[1071,4451,4452,4455,4458,4460,4462,4464,4467,4469,4471],{"class":1073,"line":1095},[1071,4453,4454],{"class":1102},"    '",[1071,4456,4457],{"class":2682},"build:manifest",[1071,4459,1136],{"class":1102},[1071,4461,1254],{"class":1077},[1071,4463,1966],{"class":1077},[1071,4465,4466],{"class":1928},"manifest",[1071,4468,1355],{"class":1077},[1071,4470,1934],{"class":1933},[1071,4472,1316],{"class":1077},[1071,4474,4475],{"class":1073,"line":1113},[1071,4476,4477],{"class":1091},"      \u002F\u002F find the app entry, css list\n",[1071,4479,4480,4483,4486,4488,4491,4493,4496,4498,4500,4502,4504,4507,4509,4512,4514,4517,4519,4522,4524,4527],{"class":1073,"line":1120},[1071,4481,4482],{"class":1933},"      const",[1071,4484,4485],{"class":1379}," css",[1071,4487,2630],{"class":1129},[1071,4489,4490],{"class":1132}," Object",[1071,4492,1944],{"class":1077},[1071,4494,4495],{"class":1239},"values",[1071,4497,1133],{"class":1250},[1071,4499,4466],{"class":1132},[1071,4501,1355],{"class":1250},[1071,4503,1944],{"class":1077},[1071,4505,4506],{"class":1239},"find",[1071,4508,1133],{"class":1250},[1071,4510,4511],{"class":1928},"options",[1071,4513,1934],{"class":1933},[1071,4515,4516],{"class":1132}," options",[1071,4518,1944],{"class":1077},[1071,4520,4521],{"class":1132},"isEntry",[1071,4523,1355],{"class":1250},[1071,4525,4526],{"class":1077},"?.",[1071,4528,4529],{"class":1132},"css\n",[1071,4531,4532,4535,4537,4539,4542],{"class":1073,"line":1126},[1071,4533,4534],{"class":1098},"      if",[1071,4536,1966],{"class":1250},[1071,4538,1215],{"class":1132},[1071,4540,4541],{"class":1250},") ",[1071,4543,1245],{"class":1077},[1071,4545,4546],{"class":1073,"line":1146},[1071,4547,4548],{"class":1091},"        \u002F\u002F start from the end of the array and go to the beginning\n",[1071,4550,4551,4554,4556,4559,4562,4564,4566,4568,4571,4574,4577,4580,4582,4585,4588,4590,4592,4595,4597],{"class":1073,"line":1156},[1071,4552,4553],{"class":1098},"        for",[1071,4555,1966],{"class":1250},[1071,4557,4558],{"class":1933},"let",[1071,4560,4561],{"class":1132}," i",[1071,4563,2630],{"class":1129},[1071,4565,4485],{"class":1132},[1071,4567,1944],{"class":1077},[1071,4569,4570],{"class":1379},"length",[1071,4572,4573],{"class":1129}," -",[1071,4575,4576],{"class":3207}," 1",[1071,4578,4579],{"class":1077},";",[1071,4581,4561],{"class":1132},[1071,4583,4584],{"class":1129}," >=",[1071,4586,4587],{"class":3207}," 0",[1071,4589,4579],{"class":1077},[1071,4591,4561],{"class":1132},[1071,4593,4594],{"class":1129},"--",[1071,4596,4541],{"class":1250},[1071,4598,1245],{"class":1077},[1071,4600,4601],{"class":1073,"line":1161},[1071,4602,4603],{"class":1091},"          \u002F\u002F if it starts with 'entry', remove it from the list\n",[1071,4605,4606,4609,4611,4613,4616,4619,4621,4623,4626,4628,4630,4633,4635,4638],{"class":1073,"line":1171},[1071,4607,4608],{"class":1098},"          if",[1071,4610,1966],{"class":1250},[1071,4612,1215],{"class":1132},[1071,4614,4615],{"class":1250},"[",[1071,4617,4618],{"class":1132},"i",[1071,4620,1267],{"class":1250},[1071,4622,1944],{"class":1077},[1071,4624,4625],{"class":1239},"startsWith",[1071,4627,1133],{"class":1250},[1071,4629,1136],{"class":1102},[1071,4631,4632],{"class":1106},"entry",[1071,4634,1136],{"class":1102},[1071,4636,4637],{"class":1250},")) ",[1071,4639,1245],{"class":1077},[1071,4641,4642,4645,4647,4650,4652,4654,4656,4658],{"class":1073,"line":1193},[1071,4643,4644],{"class":1132},"            css",[1071,4646,1944],{"class":1077},[1071,4648,4649],{"class":1239},"splice",[1071,4651,1133],{"class":1250},[1071,4653,4618],{"class":1132},[1071,4655,1449],{"class":1077},[1071,4657,4576],{"class":3207},[1071,4659,1143],{"class":1250},[1071,4661,4662],{"class":1073,"line":2745},[1071,4663,4664],{"class":1077},"          }\n",[1071,4666,4667],{"class":1073,"line":2761},[1071,4668,4669],{"class":1077},"        }\n",[1071,4671,4672],{"class":1073,"line":2776},[1071,4673,4674],{"class":1077},"      }\n",[1071,4676,4677],{"class":1073,"line":2785},[1071,4678,1776],{"class":1077},[1071,4680,4681],{"class":1073,"line":2810},[1071,4682,1781],{"class":1077},[1071,4684,4686,4688],{"class":1073,"line":4685},17,[1071,4687,1275],{"class":1077},[1071,4689,1143],{"class":1132},[1166,4691,4692],{},"html pre.shiki code .sF54B, html code.shiki .sF54B{--shiki-light:#39ADB5;--shiki-default:#E1E4E8;--shiki-dark:#89DDFF}html pre.shiki code .s6g6u, html code.shiki .s6g6u{--shiki-light:#E53935;--shiki-default:#85E89D;--shiki-dark:#F07178}html pre.shiki code .sZqJ9, html code.shiki .sZqJ9{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#6A737D;--shiki-default-font-style:inherit;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .szyBz, html code.shiki .szyBz{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#F97583;--shiki-default-font-style:inherit;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .s0jeK, html code.shiki .s0jeK{--shiki-light:#39ADB5;--shiki-default:#9ECBFF;--shiki-dark:#89DDFF}html pre.shiki code .s-Aze, html code.shiki .s-Aze{--shiki-light:#91B859;--shiki-default:#9ECBFF;--shiki-dark:#C3E88D}html pre.shiki code .sXPRQ, html code.shiki .sXPRQ{--shiki-light:#39ADB5;--shiki-default:#F97583;--shiki-dark:#89DDFF}html pre.shiki code .smVNa, html code.shiki .smVNa{--shiki-light:#90A4AE;--shiki-default:#E1E4E8;--shiki-dark:#BABED8}html pre.shiki code .scsZY, html code.shiki .scsZY{--shiki-light:#6182B8;--shiki-default:#79B8FF;--shiki-dark:#82AAFF}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .srJn9, html code.shiki .srJn9{--shiki-light:#6182B8;--shiki-default:#B392F0;--shiki-dark:#82AAFF}html pre.shiki code .sOtFm, html code.shiki .sOtFm{--shiki-light:#E53935;--shiki-default:#E1E4E8;--shiki-dark:#F07178}html pre.shiki code .sETrE, html code.shiki .sETrE{--shiki-light:#8796B0;--shiki-default:#79B8FF;--shiki-dark:#B2CCD6}html pre.shiki code .sJTDI, html code.shiki .sJTDI{--shiki-light:#90A4AE;--shiki-default:#79B8FF;--shiki-dark:#BABED8}html pre.shiki code .sv6Pl, html code.shiki .sv6Pl{--shiki-light:#E2931D;--shiki-default:#85E89D;--shiki-dark:#FFCB6B}html pre.shiki code .sJK67, html code.shiki .sJK67{--shiki-light:#E2931D;--shiki-default:#B392F0;--shiki-dark:#FFCB6B}html pre.shiki code .ssIVr, html code.shiki .ssIVr{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#FFAB70;--shiki-default-font-style:inherit;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}html pre.shiki code .sV7Px, html code.shiki .sV7Px{--shiki-light:#9C3EDA;--shiki-default:#F97583;--shiki-dark:#C792EA}html pre.shiki code .supr-, html code.shiki .supr-{--shiki-light:#91B859;--shiki-default:#79B8FF;--shiki-dark:#C3E88D}html pre.shiki code .sXjFp, html code.shiki .sXjFp{--shiki-light:#9C3EDA;--shiki-default:#B392F0;--shiki-dark:#C792EA}html pre.shiki code .si1Qm, html code.shiki .si1Qm{--shiki-light:#FF5370;--shiki-default:#79B8FF;--shiki-dark:#FF9CAC}html pre.shiki code .sSD0A, html code.shiki .sSD0A{--shiki-light:#E53935;--shiki-default:#9ECBFF;--shiki-dark:#F07178}html pre.shiki code .sMKz0, html code.shiki .sMKz0{--shiki-light:#39ADB5;--shiki-light-font-style:inherit;--shiki-default:#FDAEB7;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:inherit}html pre.shiki code .s0q4w, html code.shiki .s0q4w{--shiki-light:#39ADB5;--shiki-default:#79B8FF;--shiki-dark:#89DDFF}html pre.shiki code .sOUxV, html code.shiki .sOUxV{--shiki-light:#F76D47;--shiki-default:#79B8FF;--shiki-dark:#F78C6C}html pre.shiki code .szLpQ, html code.shiki .szLpQ{--shiki-light:#39ADB5;--shiki-default:#B392F0;--shiki-dark:#89DDFF}html pre.shiki code .ssdHM, html code.shiki .ssdHM{--shiki-light:#90A4AE;--shiki-default:#FFAB70;--shiki-dark:#BABED8}",{"title":354,"searchDepth":1095,"depth":1095,"links":4694},[4695,4701,4705,4708,4716,4717,4718,4721],{"id":1030,"depth":1088,"text":1031,"children":4696},[4697,4698,4699,4700],{"id":1047,"depth":1095,"text":1048},{"id":1208,"depth":1095,"text":1209},{"id":1285,"depth":1095,"text":1286},{"id":1469,"depth":1095,"text":1470},{"id":1676,"depth":1088,"text":1677,"children":4702},[4703,4704],{"id":1790,"depth":1095,"text":1791},{"id":1870,"depth":1095,"text":1871},{"id":2026,"depth":1088,"text":2027,"children":4706},[4707],{"id":2472,"depth":1095,"text":2473},{"id":2565,"depth":1088,"text":2566,"children":4709},[4710,4711,4713,4714,4715],{"id":2586,"depth":1095,"text":2587},{"id":3355,"depth":1095,"text":4712},"使用 v-bind 的动态样式（Dynamic Styles With v-bind）",{"id":3526,"depth":1095,"text":3527},{"id":3632,"depth":1095,"text":3633},{"id":3746,"depth":1095,"text":3747},{"id":3939,"depth":1088,"text":3940},{"id":4110,"depth":1088,"text":4111},{"id":4239,"depth":1088,"text":4240,"children":4719},[4720],{"id":4325,"depth":1095,"text":4326},{"id":4351,"depth":1088,"text":4352,"children":4722},[4723,4724,4725],{"id":4355,"depth":1095,"text":4356},{"id":4372,"depth":1095,"text":4373},{"id":4394,"depth":1095,"text":4395},"md",{},"[object Object]",{"title":26,"description":27},"docs\u002F1.getting-started\u002F06.styling","6xQN3AIZbm2G1OFrSK6YA8D9zZ7fvbt88Bp1DxURuO8",1785179851988]