[{"data":1,"prerenderedAt":328},["ShallowReactive",2],{"content:\u002Fposts\u002F2025\u002Fdomain-driven-design-with-nuxt-layers":3,"surround:\u002Fposts\u002F2025\u002Fdomain-driven-design-with-nuxt-layers":316},{"id":4,"title":5,"body":6,"canonical":23,"categories":290,"date":292,"description":293,"draft":294,"extension":295,"image":296,"meta":297,"navigation":298,"path":299,"permalink":300,"readingTime":301,"recommend":300,"references":300,"seo":306,"sitemap":307,"stem":310,"tags":311,"type":300,"updated":292,"__hash__":315},"content\u002Fposts\u002F2025\u002Fdomain-driven-design-with-nuxt-layers.md","【翻译】使用 Nuxt Layers 进行领域驱动设计",{"type":7,"value":8,"toc":281},"minimark",[9,33,36,42,49,56,59,64,67,75,83,86,90,99,116,123,132,142,148,154,162,168,175,181,190,194,212,226,229,237,241,244,247,254,257,274],[10,11,12,13,20,21,26,27,32],"p",{},"本文来自 ",[14,15,19],"a",{"href":16,"rel":17},"https:\u002F\u002Fvueschool.io\u002F",[18],"nofollow","Vue School","，这是你学习 vue 很好的站点。",[14,22,25],{"href":23,"rel":24},"https:\u002F\u002Fvueschool.io\u002Farticles\u002Fvuejs-tutorials\u002Fhow-to-structure-a-large-scale-vue-application\u002F",[18],"原文地址","，作者 ",[14,28,31],{"href":29,"rel":30},"https:\u002F\u002Fvueschool.io\u002Farticles\u002Fauthor\u002Fdaniel-kelly",[18],"Daniel Kelly"," 是 Vue School 的首席讲师，喜欢帮助其他开发人员充分发挥潜力。他拥有 10 多年使用 Vue.js、Nuxt.js 和 Laravel 等技术的开发经验。",[10,34,35],{},"如果您感觉翻译侵犯了您的著作权，可以联系我，我会在收到反馈后删除此文。",[37,38,39],"blockquote",{},[10,40,41],{},"有一部分链接是原文指向的链接，国内可能无法打开。这个还得您自己想办法喽🧐",[10,43,44],{},[45,46],"img",{"alt":47,"src":48},"","https:\u002F\u002Fbitmc.uno\u002Fpicgo\u002F6819a1e01cd76-78.webp",[50,51,52],"center",{},[53,54,55],"small",{},"原文头图",[57,58],"hr",{},[60,61,63],"h2",{"id":62},"领域驱动设计简介-intro-to-domain-driven-design","领域驱动设计简介 Intro to Domain Driven Design",[10,65,66],{},"领域驱动设计是一种基于业务关注点而非代码类型来组织代码库的方法。例如，如果我正在构建一个博客应用程序，我可能会将与用户相关的所有内容归入一个文件夹，与帖子相关的所有内容归入另一个文件夹，与评论相关的所有内容归入另一个文件夹。",[10,68,69,70,74],{},"相比之下，我把用户组件、帖子组件和评论组件都放在同一个 ",[71,72,73],"code",{"code":73},"components"," 目录中。商店、页面、可组合组件、辅助函数等等也同样如此。",[10,76,77,82],{},[14,78,81],{"href":79,"rel":80},"https:\u002F\u002Fvueschool.io\u002Farticles\u002Fvuejs-tutorials\u002Fdomain-driven-design-in-nuxt-apps\u002F",[18],"Filip Rakowski 于 2020 年在 Vue School 博客上撰写了一篇关于此主题的精彩文章","。然而，当时 Nuxt 3 Layers（以及 Nuxt 3 本身）还不存在。所以，让我们看看使用 Nuxt Layers 进行领域驱动设计是多么简单。",[10,84,85],{},"（请注意，在这种情况下，“域名(Domain)”一词与您在域名注册商处注册的 TLD（ 如 godaddy.com ） 无关。而是指“逻辑关注点”或业务对象，如帖子、用户、评论等）。",[60,87,89],{"id":88},"nuxt-layers","Nuxt Layers",[10,91,92,93,98],{},"首先，什么是 Nuxt Layers？根据 Nuxt 官网的介绍， ",[14,94,97],{"href":95,"rel":96},"https:\u002F\u002Fnuxt.com\u002Fdocs\u002Fgetting-started\u002Flayers",[18],"Nuxt Layers是“一个强大的系统，允许你扩展默认文件、配置等等”","。 本质上，我们可以创建一些“迷你 Nuxt 项目”（Layers），其文件结构类似于 Nuxt 项目的根目录，然后将每个“迷你 Nuxt 项目”与我们的主项目合并。",[10,100,101,102,105,106,108,109,108,112,115],{},"例如，我可以在我的 Nuxt 项目中创建一个目录 ",[71,103,104],{"code":104},"\u002Fdomains\u002Fusers","，并将所有与应用程序用户相关的代码存储在那里。在这个目录中，我可以使用我熟悉的目录结构，例如 ",[71,107,73],{"code":73}," 、 ",[71,110,111],{"code":111},"composables",[71,113,114],{"code":114},"pages"," 等。",[10,117,118,119,122],{},"您还应该在层中提供一个 ",[71,120,121],{"code":121},"nuxt.config.ts"," 文件。如果您只想让 Nuxt 使用其基于文件的魔法来自动加载您的组件等，它可以是一个空的配置。",[124,125,130],"pre",{"className":126,"code":128,"language":129,"meta":47},[127],"language-ts","export default defineNuxtConfig({});\n","ts",[71,131,128],{"__ignoreMap":47},[10,133,134,135,137,138,141],{},"或者，你甚至可以提供通常直接在根 ",[71,136,121],{"code":121}," 中设置的设置，它们将被合并到根配置中。如果你需要设置一些特定于当前层域（例如 ",[71,139,140],{"code":140},"users"," ）的 nuxt config 配置，那么这种方法非常有用。例如：",[124,143,146],{"className":144,"code":145,"language":129,"meta":47},[127],"export default defineNuxtConfig({\n    routeRules: {\n        \u002F\u002F 某些规则仅适用于用户页面\n        \u002F\u002F 或许是 \u002Fprofiles 重定向到 \u002Fusers\n        \"\u002Fprofiles\": { redirect: \"\u002Fusers\" }\n    }\n});\n",[71,147,145],{"__ignoreMap":47},[10,149,150,153],{},[71,151,152],{"code":152},"\u002Fdomains\u002Fusers\u002F"," 的目录结构最终看起来像这样。",[124,155,160],{"className":156,"code":158,"language":159,"meta":47},[157],"language-txt","\u002Fmy-nuxt-project\n    \u002Fnuxt.config.ts\n    \u002Fpages\n    ... all the other root nuxt directories 其他所有的 nuxt 文件及文件夹\n    \u002Fdomains\u002Fusers  👈 the juicy stuff!\n        \u002Fcomponents\n        \u002Fcomposables\n        \u002Futils\n        \u002Fserver\n        \u002Fpages\n        nuxt.config.ts\n","txt",[71,161,158],{"__ignoreMap":47},[10,163,164,165,167],{},"最后，为了让我的真实项目知道应该将我的用户层合并到主应用程序代码中，我需要在我的根 ",[71,166,121],{"code":121}," 文件中注册该 Layer。",[124,169,173],{"className":170,"code":171,"filename":172,"language":129,"meta":47},[127],"\u002F\u002F \u002Fnuxt.config.ts\nexport default defineNuxtConfig({\n    devtools: { enabled: true },\n    extends: [\".\u002Fdomains\u002Fusers\"],\n});\n","\u002Fnuxt.config.ts",[71,174,171],{"__ignoreMap":47},[10,176,177,178,180],{},"就这样！现在我所有的用户组件都自动导入了，等等。最重要的是，所有与我的应用程序 ",[71,179,140],{"code":140}," 相关的内容都被组织到了一个地方。",[10,182,183,184,189],{},"如果您想看一个可能的示例，请查看 ",[14,185,188],{"href":186,"rel":187},"https:\u002F\u002Fstackblitz.com\u002Fgithub\u002Fvueschool\u002Fnuxt-domain-driven-design-example",[18],"StackBlitz 上的这个示例项目","。",[60,191,193],{"id":192},"nuxt-模块","Nuxt 模块",[10,195,196,197,201,202,204,205,207,208,211],{},"Nuxt 层功能强大，但与自定义模块结合，可以最大限度地发挥领域驱动设计的优势。例如， 在",[14,198,200],{"href":186,"rel":199},[18],"示例 stackblitz 项目","中 ，为了确保路由正确，我们仍然需要在每层的 ",[71,203,114],{"code":114}," 目录中嵌套 ",[71,206,140],{"code":140}," 和 ",[71,209,210],{"code":210},"posts"," 目录。像这样就有点冗余了：",[213,214,215,221],"ul",{},[216,217,218],"li",{},[71,219,220],{"code":220},"\u002Fdomain\u002Fusers\u002Fpages\u002Fusers",[216,222,223],{},[71,224,225],{"code":225},"\u002Fdomain\u002Fusers\u002Fpages\u002Fposts",[10,227,228],{},"我们不会在这篇短文中尝试编写代码，但这绝对是可行的！如果您希望我们进一步研究，请在 Twitter 上告诉我们，我们会尝试一下 🙂。或者，如果您自己想出了解决方案，我们也很乐意看到！",[10,230,231,232,189],{},"此外，如果您想了解自定义 Nuxt 模块的所有功能、它们如何促进领域驱动设计以及如何创建自己的自定义模块，请查看我们的课程：",[14,233,236],{"href":234,"rel":235},"https:\u002F\u002Fvueschool.io\u002Fcourses\u002Fnuxt-modules-the-ultimate-guide",[18],"Nuxt 模块终极指南",[60,238,240],{"id":239},"domain-driven-design-领域驱动设计","Domain Driven Design  领域驱动设计",[10,242,243],{},"总而言之，领域驱动设计 (DDD) 是组织 Nuxt 代码库的绝佳工具。结合 Nuxt 层和 Nuxt 模块的强大功能，您可以为您的应用构建一个强大且直观的 DDD 系统。",[60,245,246],{"id":246},"译者结语",[10,248,249,250,253],{},"你可以在 ",[14,251,19],{"href":234,"rel":252},[18]," 中观看这个课程，前面的 15 节都是免费播出的。",[10,255,256],{},"补充的视频可以观看：（YouTube）",[258,259,260,267],"ol",{},[216,261,262],{},[14,263,266],{"href":264,"rel":265},"https:\u002F\u002Fwww.youtube.com\u002Fwatch?v=fr5yo3aVkfA&t=171s",[18],"How to use Nuxt Layers to encapsulate your code",[216,268,269],{},[14,270,273],{"href":271,"rel":272},"https:\u002F\u002Fwww.youtube.com\u002Fwatch?v=HvTui3P0w-o",[18],"Nuxt Extends is going to be HUGE",[10,275,276,277,280],{},"文档部分可以去 ",[14,278,89],{"href":95,"rel":279},[18]," 查看。",{"title":47,"searchDepth":282,"depth":282,"links":283},4,[284,286,287,288,289],{"id":62,"depth":285,"text":63},2,{"id":88,"depth":285,"text":89},{"id":192,"depth":285,"text":193},{"id":239,"depth":285,"text":240},{"id":246,"depth":285,"text":246},[291],"译","2025-05-06 13:30:25","Nuxt 的领域驱动设计 (DDD) 使开发者能够根据业务需求调整软件架构，从而更有效地构建应用程序。本文将深入探讨 Nuxt Layers ，以及它如何增强 Nuxt 中的 DDD 方法，通过将复杂的应用程序组织到层中，从而提高可扩展性和可维护性，使其更易于管理。最终，您将掌握在自己的 Nuxt 项目中应用 DDD 原则的知识。",false,"md","https:\u002F\u002Fbitmc.uno\u002Fpicgo\u002F6819a42874dee-78.webp",{},true,"\u002Fposts\u002F2025\u002Fdomain-driven-design-with-nuxt-layers",null,{"text":302,"minutes":303,"time":304,"words":305},"7 min read",6.285,377100,1257,{"title":5,"description":293},{"loc":299,"images":308},[309],{"loc":48},"posts\u002F2025\u002Fdomain-driven-design-with-nuxt-layers",[312,313,89,314],"翻译","Nuxt","DDD","tC-26QyGx94o6OmLQCcXCMnlfMiABM5Wy4RUlCSvCwM",[317,322],{"title":318,"path":319,"stem":320,"date":321,"type":300,"children":-1},"【翻译】如何构建大型 Vue 应用程序","\u002Fposts\u002F2025\u002Fhow-to-structure-a-large-scale-vue-application","posts\u002F2025\u002Fhow-to-structure-a-large-scale-vue-application","2025-05-06 09:40:22",{"title":323,"path":324,"stem":325,"date":326,"type":327,"children":-1},"shadcn-vue-admin 100星留念","\u002Fposts\u002F2025\u002Fshadcn-vue-admin-100-star","posts\u002F2025\u002Fshadcn-vue-admin-100-star","2025-06-07 12:18:16","story",1789642589498]