欢迎页

NuxtWelcome

Nuxt 新项目默认的欢迎页面，展示 Nuxt 品牌标识、文档链接和社区入口。

<template>
  <NuxtWelcome />
</template>

这是 nuxi init 创建项目时 app/pages/index.vue 的默认内容。

组件构成

<NuxtWelcome> 内部由以下子组件组成：

子组件	说明
NuxtLogo	Nuxt 品牌Logo
NuxtTutorial	快速入门教程链接区域
CommonsHero	社区与文档入口

TIP

这些子组件来自 @nuxt/ui-pro 模块 如果未安装该模块则无法单独使用

替换为自定义首页

通常你会替换为自己的首页内容：

<!-- app/pages/index.vue -->
<template>
  <div>
    <h1>欢迎来到我的网站</h1>
    <!-- 你的内容 -->
  </div>
</template>

保留欢迎页但自定义样式

如果想在开发阶段保留欢迎页但调整外观：

<!-- app/pages/index.vue -->
<template>
  <div class="custom-welcome">
    <NuxtWelcome />
  </div>
</template>

<style scoped>
.custom-welcome {
  padding: 2rem;
  background: var(--color-bg);
}
</style>

TIP

<NuxtWelcome> 仅用于项目初始化和开发阶段 不建议在生产环境中使用