[{"data":1,"prerenderedAt":444},["ShallowReactive",2],{"article-94-why-choose-nuxt-for-blog-development":3},{"id":4,"title":5,"slug":6,"contentMarkdown":7,"coverImage":8,"category":9,"tags":10,"aiSummary":13,"createdAt":14,"updatedAt":15,"_mdcAst":16,"_mdcToc":423},94,"为什么选Nuxt写博客站","why-choose-nuxt-for-blog-development","我的网站是基于Nuxt框架设计的，当时在设计网站时我本来想的是写一个Vue spa锻炼自己的前端代码能力，结果后面AI异军突起，所谓的代码能力有什么用呢？尤其是抱着算法不放的，不如放弃这部分，转而培养自己的审美/知识面，或者运用AI的 能力。\n\n然后就有了一个问题：我写了一个Vue spa博客站，Vue spa有很多限制，但是我又不希望博客站只能拿来写文档啥的，我希望能有高度的自定义能力，能写一些有意思的功能插入到文档里面。\n\n这时我有两个选择（在Vue生态）：\n\n### 1.VitePress\n\n**定位：** 专注于“文档”的静态网站生成器 (SSG)。它是 VuePress 的继承者，追求极致的极简和速度。\n\n#### **优点 (Pros):**\n*   **开箱即用：** 内置了美观的文档主题、搜索、导航栏、侧边栏、国际化等，几分钟内就能搭建一个专业的文档站。\n*   **极致性能：** 基于 Vite，开发环境秒开；打包后的页面极其轻量，采用了预渲染和极其精简的客户端代码。\n*   **Vue 直接嵌入：** 你可以直接在 Markdown 里写 Vue 组件（`\u003CMyComponent />`），无需特殊语法。\n*   **SEO 友好：** 默认纯静态化，对搜索引擎极其友好。\n*   **低心智负担：** 如果你的目标只是写文档或技术博客，它不需要你懂复杂的概念。\n\n#### **缺点 (Cons):**\n*   **灵活性受限：** 它是一个“框架”，而非“库”。如果你想脱离它的文档结构，做一个复杂的功能或后台，会发现束手束脚。\n*   **数据查询能力弱：** 很难像数据库那样在不同页面间进行复杂的关联查询（比如：按标签聚合、分页、全文搜索自定义）。\n*   **CSS 隔离问题：** 在 Markdown 里写的样式有时会干扰到全局或组件样式。\n\n### 2.Nuxt生态\n\n####  Nuxt MDC \n**定位：** 一个强大的、面向 Nuxt 应用的**内容管理层**。它把 Markdown 变成了一个完全可编程的数据源。\n\n#### **优点 (Pros):**\n*   **全能型选手：** 它是 Nuxt 的一个插件，这意味着你可以使用 Nuxt 的所有能力（如 Server API、中间件、Auth、多插件集成）。\n*   **MDC 语法 (`::`)：** 这种语法比纯 HTML 标签更简洁，且支持层级嵌套。它能让非开发人员（如文案人员）更安全地使用复杂组件。\n*   **强大的查询引擎 (Query Builder)：** 像使用 SQL/NoSQL 一样查询 Markdown 文件。你可以轻松实现“获取前 3 篇文章”、“根据分类过滤”等功能。\n*   **混合渲染 (Hybrid Rendering)：** 支持 SSR（服务端渲染）、CSR（客户端渲染）或 ISR（增量更新），适合动态内容较多的场景。\n*   **Slot 支持：** MDC 语法天然支持将 Markdown 内容分发到组件的特定插槽（Slot），这在做复杂布局时非常强大。\n\n#### **缺点 (Cons):**\n*   **上手门槛高：** 你需要先学会 Nuxt。对于只想写个简单文档的人来说，配置过程过于繁琐。\n*   **需要自己造轮子：** 它不提供默认的文档主题。你需要从零开始写 CSS、导航逻辑、侧边栏逻辑（或者使用专门的 Nuxt UI Pro，那是收费的）。\n*   **构建速度：** 在超大规模文档（数千页）下，由于 Nuxt 本身的复杂性，构建速度通常慢于 VitePress。\n\n\n\n我需要高度定制化的 UI，同时不希望被现成的文档主题限制，再加上我的Vue spa基本已经把UI这部分写的差不多了（导航/路由等等）。因此迁移到Nuxt是最好的选择。\n\n构建速度慢也没事，我使用的github action自动构建的，对我来说没啥影响，剩下的也就是Nuxt本身的学习了，对于有Vue经验的人来说学习Nuxt其实不难，只需要学习框架本身的一些需要用到的特性。\n\n\n## 自定义Nuxt mdc组件\n\nNuxt本身的学习我就不赘述了，B站很多很多教程。你有什么疑问也可以问AI。\n\n后面可能就要讲讲通过mdc语法构建美观的组件了。先展示几个例子：\n\n### Github 卡片\n\n\n\n::github-card{repo=\"wasd09090030/live2Dpet_Miku\"}\n::\n\n### 代码在线运行\n\n::code-playground{lang=\"javascript\" title=\"JavaScript 示例\" runnable}\nconsole.log('Hello World!')\nconst sum = (a, b) => a + b\nconsole.log(sum(2, 3))\n::\n\n::code-playground{lang=\"javascript\" title=\"JavaScript 示例\"}\nconsole.log('Hello World!')\nconst sum = (a, b) => a + b\nconsole.log(sum(2, 3))\n::\n\n### 基于NaiveUI的步骤\n\n::steps{current=\"2\" status=\"process\" showControls clickable}\n---\nsteps:\n  - title: \"第一步\"\n    description: \"注册账号\"\n  - title: \"第二步\"\n    description: \"完善信息\"\n  - title: \"第三步\"\n    description: \"开始使用\"\n---\n::\n\n### 嵌入视频\n\n\n\n::web-embed{url=\"https://www.bilibili.com/video/BV18VtseEEQy\" aspectRatio=\"16/9\"}\n::\n\n### 总结\n\n说实话React 生态的MDX文档是真好，各种组件也全，能不用自己设计，不过为了追求生态统一我还是选择的Nuxt mdc。\n\n说实话Nuxt mdc也是蛮方便的，虽然社区成熟度不如MDX。\n\n因为MDX需要手动 import MyComp from '...'，而Nuxt mdc却只需要只要组件在 components/content/ 下即可直接用。且MDX由于运行的是JS环境，相比的Nuxt mdc在安全性上更好，因为解析的是数据结构，不直接执行 JS 代码。\n\n现在想想Nuxt框架虽然是后来者，但是进步确实很快，说实话我还是蛮看好的。","https://cfimg.wasd09090030.top/file/blogS/1771225771052_bb78c8d657051337d1758040ffaef247.webp","other",[11,12],"前端","分享","作者在选择博客框架时，对比了VitePress和Nuxt生态。VitePress专注于文档，开箱即用但灵活性受限；Nuxt MDC作为Nuxt的内容管理插件，提供高度自定义能力、强大的查询引擎和混合渲染，支持MDC语法嵌入复杂组件。作者因追求高度定制化UI且已有Vue SPA基础，选择迁移到Nuxt。文章还展示了使用Nuxt MDC构建的Github卡片、代码运行器等自定义组件，并指出虽然Nuxt MDC社区成熟度不如React的MDX，但在安全性和易用性上有优势。","2026-02-16T06:46:42.6858619","2026-02-28T02:16:27.4800863",{"data":17,"body":20,"toc":423},{"title":18,"description":19},"","我的网站是基于Nuxt框架设计的，当时在设计网站时我本来想的是写一个Vue spa锻炼自己的前端代码能力，结果后面AI异军突起，所谓的代码能力有什么用呢？尤其是抱着算法不放的，不如放弃这部分，转而培养自己的审美/知识面，或者运用AI的 能力。",{"type":21,"children":22},"root",[23,30,35,40,47,58,68,132,141,174,180,186,202,210,271,279,312,317,322,329,334,339,345,350,355,367,374,380,387,392,398,403,408,413,418],{"type":24,"tag":25,"props":26,"children":27},"element","p",{},[28],{"type":29,"value":19},"text",{"type":24,"tag":25,"props":31,"children":32},{},[33],{"type":29,"value":34},"然后就有了一个问题：我写了一个Vue spa博客站，Vue spa有很多限制，但是我又不希望博客站只能拿来写文档啥的，我希望能有高度的自定义能力，能写一些有意思的功能插入到文档里面。",{"type":24,"tag":25,"props":36,"children":37},{},[38],{"type":29,"value":39},"这时我有两个选择（在Vue生态）：",{"type":24,"tag":41,"props":42,"children":44},"h3",{"id":43},"_1vitepress",[45],{"type":29,"value":46},"1.VitePress",{"type":24,"tag":25,"props":48,"children":49},{},[50,56],{"type":24,"tag":51,"props":52,"children":53},"strong",{},[54],{"type":29,"value":55},"定位：",{"type":29,"value":57}," 专注于“文档”的静态网站生成器 (SSG)。它是 VuePress 的继承者，追求极致的极简和速度。",{"type":24,"tag":59,"props":60,"children":62},"h4",{"id":61},"优点-pros",[63],{"type":24,"tag":51,"props":64,"children":65},{},[66],{"type":29,"value":67},"优点 (Pros):",{"type":24,"tag":69,"props":70,"children":71},"ul",{},[72,83,93,112,122],{"type":24,"tag":73,"props":74,"children":75},"li",{},[76,81],{"type":24,"tag":51,"props":77,"children":78},{},[79],{"type":29,"value":80},"开箱即用：",{"type":29,"value":82}," 内置了美观的文档主题、搜索、导航栏、侧边栏、国际化等，几分钟内就能搭建一个专业的文档站。",{"type":24,"tag":73,"props":84,"children":85},{},[86,91],{"type":24,"tag":51,"props":87,"children":88},{},[89],{"type":29,"value":90},"极致性能：",{"type":29,"value":92}," 基于 Vite，开发环境秒开；打包后的页面极其轻量，采用了预渲染和极其精简的客户端代码。",{"type":24,"tag":73,"props":94,"children":95},{},[96,101,103,110],{"type":24,"tag":51,"props":97,"children":98},{},[99],{"type":29,"value":100},"Vue 直接嵌入：",{"type":29,"value":102}," 你可以直接在 Markdown 里写 Vue 组件（",{"type":24,"tag":104,"props":105,"children":107},"code",{"className":106},[],[108],{"type":29,"value":109},"\u003CMyComponent />",{"type":29,"value":111},"），无需特殊语法。",{"type":24,"tag":73,"props":113,"children":114},{},[115,120],{"type":24,"tag":51,"props":116,"children":117},{},[118],{"type":29,"value":119},"SEO 友好：",{"type":29,"value":121}," 默认纯静态化，对搜索引擎极其友好。",{"type":24,"tag":73,"props":123,"children":124},{},[125,130],{"type":24,"tag":51,"props":126,"children":127},{},[128],{"type":29,"value":129},"低心智负担：",{"type":29,"value":131}," 如果你的目标只是写文档或技术博客，它不需要你懂复杂的概念。",{"type":24,"tag":59,"props":133,"children":135},{"id":134},"缺点-cons",[136],{"type":24,"tag":51,"props":137,"children":138},{},[139],{"type":29,"value":140},"缺点 (Cons):",{"type":24,"tag":69,"props":142,"children":143},{},[144,154,164],{"type":24,"tag":73,"props":145,"children":146},{},[147,152],{"type":24,"tag":51,"props":148,"children":149},{},[150],{"type":29,"value":151},"灵活性受限：",{"type":29,"value":153}," 它是一个“框架”，而非“库”。如果你想脱离它的文档结构，做一个复杂的功能或后台，会发现束手束脚。",{"type":24,"tag":73,"props":155,"children":156},{},[157,162],{"type":24,"tag":51,"props":158,"children":159},{},[160],{"type":29,"value":161},"数据查询能力弱：",{"type":29,"value":163}," 很难像数据库那样在不同页面间进行复杂的关联查询（比如：按标签聚合、分页、全文搜索自定义）。",{"type":24,"tag":73,"props":165,"children":166},{},[167,172],{"type":24,"tag":51,"props":168,"children":169},{},[170],{"type":29,"value":171},"CSS 隔离问题：",{"type":29,"value":173}," 在 Markdown 里写的样式有时会干扰到全局或组件样式。",{"type":24,"tag":41,"props":175,"children":177},{"id":176},"_2nuxt生态",[178],{"type":29,"value":179},"2.Nuxt生态",{"type":24,"tag":59,"props":181,"children":183},{"id":182},"nuxt-mdc",[184],{"type":29,"value":185},"Nuxt MDC",{"type":24,"tag":25,"props":187,"children":188},{},[189,193,195,200],{"type":24,"tag":51,"props":190,"children":191},{},[192],{"type":29,"value":55},{"type":29,"value":194}," 一个强大的、面向 Nuxt 应用的",{"type":24,"tag":51,"props":196,"children":197},{},[198],{"type":29,"value":199},"内容管理层",{"type":29,"value":201},"。它把 Markdown 变成了一个完全可编程的数据源。",{"type":24,"tag":59,"props":203,"children":205},{"id":204},"优点-pros-1",[206],{"type":24,"tag":51,"props":207,"children":208},{},[209],{"type":29,"value":67},{"type":24,"tag":69,"props":211,"children":212},{},[213,223,241,251,261],{"type":24,"tag":73,"props":214,"children":215},{},[216,221],{"type":24,"tag":51,"props":217,"children":218},{},[219],{"type":29,"value":220},"全能型选手：",{"type":29,"value":222}," 它是 Nuxt 的一个插件，这意味着你可以使用 Nuxt 的所有能力（如 Server API、中间件、Auth、多插件集成）。",{"type":24,"tag":73,"props":224,"children":225},{},[226,239],{"type":24,"tag":51,"props":227,"children":228},{},[229,231,237],{"type":29,"value":230},"MDC 语法 (",{"type":24,"tag":104,"props":232,"children":234},{"className":233},[],[235],{"type":29,"value":236},"::",{"type":29,"value":238},")：",{"type":29,"value":240}," 这种语法比纯 HTML 标签更简洁，且支持层级嵌套。它能让非开发人员（如文案人员）更安全地使用复杂组件。",{"type":24,"tag":73,"props":242,"children":243},{},[244,249],{"type":24,"tag":51,"props":245,"children":246},{},[247],{"type":29,"value":248},"强大的查询引擎 (Query Builder)：",{"type":29,"value":250}," 像使用 SQL/NoSQL 一样查询 Markdown 文件。你可以轻松实现“获取前 3 篇文章”、“根据分类过滤”等功能。",{"type":24,"tag":73,"props":252,"children":253},{},[254,259],{"type":24,"tag":51,"props":255,"children":256},{},[257],{"type":29,"value":258},"混合渲染 (Hybrid Rendering)：",{"type":29,"value":260}," 支持 SSR（服务端渲染）、CSR（客户端渲染）或 ISR（增量更新），适合动态内容较多的场景。",{"type":24,"tag":73,"props":262,"children":263},{},[264,269],{"type":24,"tag":51,"props":265,"children":266},{},[267],{"type":29,"value":268},"Slot 支持：",{"type":29,"value":270}," MDC 语法天然支持将 Markdown 内容分发到组件的特定插槽（Slot），这在做复杂布局时非常强大。",{"type":24,"tag":59,"props":272,"children":274},{"id":273},"缺点-cons-1",[275],{"type":24,"tag":51,"props":276,"children":277},{},[278],{"type":29,"value":140},{"type":24,"tag":69,"props":280,"children":281},{},[282,292,302],{"type":24,"tag":73,"props":283,"children":284},{},[285,290],{"type":24,"tag":51,"props":286,"children":287},{},[288],{"type":29,"value":289},"上手门槛高：",{"type":29,"value":291}," 你需要先学会 Nuxt。对于只想写个简单文档的人来说，配置过程过于繁琐。",{"type":24,"tag":73,"props":293,"children":294},{},[295,300],{"type":24,"tag":51,"props":296,"children":297},{},[298],{"type":29,"value":299},"需要自己造轮子：",{"type":29,"value":301}," 它不提供默认的文档主题。你需要从零开始写 CSS、导航逻辑、侧边栏逻辑（或者使用专门的 Nuxt UI Pro，那是收费的）。",{"type":24,"tag":73,"props":303,"children":304},{},[305,310],{"type":24,"tag":51,"props":306,"children":307},{},[308],{"type":29,"value":309},"构建速度：",{"type":29,"value":311}," 在超大规模文档（数千页）下，由于 Nuxt 本身的复杂性，构建速度通常慢于 VitePress。",{"type":24,"tag":25,"props":313,"children":314},{},[315],{"type":29,"value":316},"我需要高度定制化的 UI，同时不希望被现成的文档主题限制，再加上我的Vue spa基本已经把UI这部分写的差不多了（导航/路由等等）。因此迁移到Nuxt是最好的选择。",{"type":24,"tag":25,"props":318,"children":319},{},[320],{"type":29,"value":321},"构建速度慢也没事，我使用的github action自动构建的，对我来说没啥影响，剩下的也就是Nuxt本身的学习了，对于有Vue经验的人来说学习Nuxt其实不难，只需要学习框架本身的一些需要用到的特性。",{"type":24,"tag":323,"props":324,"children":326},"h2",{"id":325},"自定义nuxt-mdc组件",[327],{"type":29,"value":328},"自定义Nuxt mdc组件",{"type":24,"tag":25,"props":330,"children":331},{},[332],{"type":29,"value":333},"Nuxt本身的学习我就不赘述了，B站很多很多教程。你有什么疑问也可以问AI。",{"type":24,"tag":25,"props":335,"children":336},{},[337],{"type":29,"value":338},"后面可能就要讲讲通过mdc语法构建美观的组件了。先展示几个例子：",{"type":24,"tag":41,"props":340,"children":342},{"id":341},"github-卡片",[343],{"type":29,"value":344},"Github 卡片",{"type":24,"tag":346,"props":347,"children":349},"github-card",{"repo":348},"wasd09090030/live2Dpet_Miku",[],{"type":24,"tag":41,"props":351,"children":353},{"id":352},"代码在线运行",[354],{"type":29,"value":352},{"type":24,"tag":356,"props":357,"children":361},"code-playground",{"lang":358,"title":359,":runnable":360,"runnable":18},"javascript","JavaScript 示例","true",[362],{"type":24,"tag":25,"props":363,"children":364},{},[365],{"type":29,"value":366},"console.log('Hello World!')\nconst sum = (a, b) => a + b\nconsole.log(sum(2, 3))",{"type":24,"tag":356,"props":368,"children":369},{"lang":358,"title":359},[370],{"type":24,"tag":25,"props":371,"children":372},{},[373],{"type":29,"value":366},{"type":24,"tag":41,"props":375,"children":377},{"id":376},"基于naiveui的步骤",[378],{"type":29,"value":379},"基于NaiveUI的步骤",{"type":24,"tag":381,"props":382,"children":386},"steps",{":clickable":360,":show-controls":360,":steps":383,"clickable":18,"current":384,"show-controls":18,"status":385},"[{\"title\":\"第一步\",\"description\":\"注册账号\"},{\"title\":\"第二步\",\"description\":\"完善信息\"},{\"title\":\"第三步\",\"description\":\"开始使用\"}]","2","process",[],{"type":24,"tag":41,"props":388,"children":390},{"id":389},"嵌入视频",[391],{"type":29,"value":389},{"type":24,"tag":393,"props":394,"children":397},"web-embed",{"aspect-ratio":395,"url":396},"16/9","https://www.bilibili.com/video/BV18VtseEEQy",[],{"type":24,"tag":41,"props":399,"children":401},{"id":400},"总结",[402],{"type":29,"value":400},{"type":24,"tag":25,"props":404,"children":405},{},[406],{"type":29,"value":407},"说实话React 生态的MDX文档是真好，各种组件也全，能不用自己设计，不过为了追求生态统一我还是选择的Nuxt mdc。",{"type":24,"tag":25,"props":409,"children":410},{},[411],{"type":29,"value":412},"说实话Nuxt mdc也是蛮方便的，虽然社区成熟度不如MDX。",{"type":24,"tag":25,"props":414,"children":415},{},[416],{"type":29,"value":417},"因为MDX需要手动 import MyComp from '...'，而Nuxt mdc却只需要只要组件在 components/content/ 下即可直接用。且MDX由于运行的是JS环境，相比的Nuxt mdc在安全性上更好，因为解析的是数据结构，不直接执行 JS 代码。",{"type":24,"tag":25,"props":419,"children":420},{},[421],{"type":29,"value":422},"现在想想Nuxt框架虽然是后来者，但是进步确实很快，说实话我还是蛮看好的。",{"title":18,"searchDepth":424,"depth":424,"links":425},4,[426,431,436],{"id":43,"depth":427,"text":46,"children":428},3,[429,430],{"id":61,"depth":424,"text":67},{"id":134,"depth":424,"text":140},{"id":176,"depth":427,"text":179,"children":432},[433,434,435],{"id":182,"depth":424,"text":185},{"id":204,"depth":424,"text":67},{"id":273,"depth":424,"text":140},{"id":325,"depth":437,"text":328,"children":438},2,[439,440,441,442,443],{"id":341,"depth":427,"text":344},{"id":352,"depth":427,"text":352},{"id":376,"depth":427,"text":379},{"id":389,"depth":427,"text":389},{"id":400,"depth":427,"text":400},1776415020895]