[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"blog-hello-world":3},{"id":4,"title":5,"body":6,"date":357,"description":358,"draft":359,"extension":360,"featured":361,"image":362,"meta":363,"navigation":361,"path":364,"seo":365,"stem":366,"tags":367,"__hash__":371},"blog\u002Fblog\u002Fhello-world.md","使用 Nuxt 3 + Nuxt UI 搭建个人网站",{"type":7,"value":8,"toc":348},"minimark",[9,14,18,47,50,107,110,115,118,194,198,201,338,341,344],[10,11,13],"h2",{"id":12},"为什么选择-nuxt","为什么选择 Nuxt？",[15,16,17],"p",{},"Nuxt 3 是一个基于 Vue 3 的全栈框架，提供了：",[19,20,21,29,35,41],"ul",{},[22,23,24,28],"li",{},[25,26,27],"strong",{},"文件路由","：创建文件即创建路由",[22,30,31,34],{},[25,32,33],{},"自动导入","：组件和工具函数无需手动导入",[22,36,37,40],{},[25,38,39],{},"SSR\u002FSSG","：灵活的服务端渲染和静态生成",[22,42,43,46],{},[25,44,45],{},"模块生态","：丰富的官方和社区模块",[10,48,49],{"id":49},"快速开始",[51,52,57],"pre",{"className":53,"code":54,"language":55,"meta":56,"style":56},"language-bash shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","npx nuxi@latest init my-website -t ui\ncd my-website\nnpm run dev\n","bash","",[58,59,60,85,95],"code",{"__ignoreMap":56},[61,62,65,69,73,76,79,82],"span",{"class":63,"line":64},"line",1,[61,66,68],{"class":67},"sBMFI","npx",[61,70,72],{"class":71},"sfazB"," nuxi@latest",[61,74,75],{"class":71}," init",[61,77,78],{"class":71}," my-website",[61,80,81],{"class":71}," -t",[61,83,84],{"class":71}," ui\n",[61,86,88,92],{"class":63,"line":87},2,[61,89,91],{"class":90},"s2Zo4","cd",[61,93,94],{"class":71}," my-website\n",[61,96,98,101,104],{"class":63,"line":97},3,[61,99,100],{"class":67},"npm",[61,102,103],{"class":71}," run",[61,105,106],{"class":71}," dev\n",[10,108,109],{"id":109},"核心模块",[111,112,114],"h3",{"id":113},"nuxtui","@nuxt\u002Fui",[15,116,117],{},"内置 100+ 组件，基于 Tailwind CSS，支持暗色模式。",[51,119,123],{"className":120,"code":121,"language":122,"meta":56,"style":56},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Ctemplate>\n  \u003CUButton color=\"primary\">点击我\u003C\u002FUButton>\n  \u003CUColorModeButton \u002F>\n\u003C\u002Ftemplate>\n","vue",[58,124,125,138,175,185],{"__ignoreMap":56},[61,126,127,131,135],{"class":63,"line":64},[61,128,130],{"class":129},"sMK4o","\u003C",[61,132,134],{"class":133},"swJcz","template",[61,136,137],{"class":129},">\n",[61,139,140,143,146,150,153,156,159,161,164,168,171,173],{"class":63,"line":87},[61,141,142],{"class":129},"  \u003C",[61,144,145],{"class":133},"UButton",[61,147,149],{"class":148},"spNyl"," color",[61,151,152],{"class":129},"=",[61,154,155],{"class":129},"\"",[61,157,158],{"class":71},"primary",[61,160,155],{"class":129},[61,162,163],{"class":129},">",[61,165,167],{"class":166},"sTEyZ","点击我",[61,169,170],{"class":129},"\u003C\u002F",[61,172,145],{"class":133},[61,174,137],{"class":129},[61,176,177,179,182],{"class":63,"line":97},[61,178,142],{"class":129},[61,180,181],{"class":133},"UColorModeButton",[61,183,184],{"class":129}," \u002F>\n",[61,186,188,190,192],{"class":63,"line":187},4,[61,189,170],{"class":129},[61,191,134],{"class":133},[61,193,137],{"class":129},[111,195,197],{"id":196},"nuxtcontent","@nuxt\u002Fcontent",[15,199,200],{},"Markdown 驱动的内容管理，类型安全的查询。",[51,202,206],{"className":203,"code":204,"language":205,"meta":56,"style":56},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","const { data } = await useAsyncData(() =>\n  queryCollection('blog')\n    .where('draft', '!=', true)\n    .order('date', 'DESC')\n    .all()\n)\n","ts",[58,207,208,241,259,295,322,333],{"__ignoreMap":56},[61,209,210,213,216,219,222,225,229,232,235,238],{"class":63,"line":64},[61,211,212],{"class":148},"const",[61,214,215],{"class":129}," {",[61,217,218],{"class":166}," data ",[61,220,221],{"class":129},"}",[61,223,224],{"class":129}," =",[61,226,228],{"class":227},"s7zQu"," await",[61,230,231],{"class":90}," useAsyncData",[61,233,234],{"class":166},"(",[61,236,237],{"class":129},"()",[61,239,240],{"class":148}," =>\n",[61,242,243,246,248,251,254,256],{"class":63,"line":87},[61,244,245],{"class":90},"  queryCollection",[61,247,234],{"class":166},[61,249,250],{"class":129},"'",[61,252,253],{"class":71},"blog",[61,255,250],{"class":129},[61,257,258],{"class":166},")\n",[61,260,261,264,267,269,271,274,276,279,282,285,287,289,293],{"class":63,"line":97},[61,262,263],{"class":129},"    .",[61,265,266],{"class":90},"where",[61,268,234],{"class":166},[61,270,250],{"class":129},[61,272,273],{"class":71},"draft",[61,275,250],{"class":129},[61,277,278],{"class":129},",",[61,280,281],{"class":129}," '",[61,283,284],{"class":71},"!=",[61,286,250],{"class":129},[61,288,278],{"class":129},[61,290,292],{"class":291},"sfNiH"," true",[61,294,258],{"class":166},[61,296,297,299,302,304,306,309,311,313,315,318,320],{"class":63,"line":187},[61,298,263],{"class":129},[61,300,301],{"class":90},"order",[61,303,234],{"class":166},[61,305,250],{"class":129},[61,307,308],{"class":71},"date",[61,310,250],{"class":129},[61,312,278],{"class":129},[61,314,281],{"class":129},[61,316,317],{"class":71},"DESC",[61,319,250],{"class":129},[61,321,258],{"class":166},[61,323,325,327,330],{"class":63,"line":324},5,[61,326,263],{"class":129},[61,328,329],{"class":90},"all",[61,331,332],{"class":166},"()\n",[61,334,336],{"class":63,"line":335},6,[61,337,258],{"class":166},[10,339,340],{"id":340},"小结",[15,342,343],{},"Nuxt 3 生态让构建个人网站变得简单高效。",[345,346,347],"style",{},"html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}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 .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}",{"title":56,"searchDepth":87,"depth":87,"links":349},[350,351,352,356],{"id":12,"depth":87,"text":13},{"id":49,"depth":87,"text":49},{"id":109,"depth":87,"text":109,"children":353},[354,355],{"id":113,"depth":97,"text":114},{"id":196,"depth":97,"text":197},{"id":340,"depth":87,"text":340},"2026-07-10","一篇完整的教程，带你从零开始用 Nuxt 3 和 Nuxt UI 搭建现代化个人网站，支持暗色模式、响应式布局。",false,"md",true,null,{},"\u002Fblog\u002Fhello-world",{"title":5,"description":358},"blog\u002Fhello-world",[368,122,369,370],"nuxt","typescript","tutorial","9xKodqx205Gr4LXp4XRdfCf5FId3J2O1PjCM_J39aR8"]