nuxt3 自定义NuxtWelcome组件

在 Nuxt.js v3 中，自定义 `NuxtWelcome` 组件是一个创建项目启动页的实用方式。Nuxt默认会提供一个欢迎页面，但在某些场景下，你可能希望展示特定的内容、风格或者动态加载数据。你可以通过创建一个名为 `~/pages/_welcome.vue` 的文件来创建一个自定义的欢迎组件。

在这个文件中，你需要编写一个 Vue 组件模板，通常包含标题、描述、或者引导用户开始的部分。例如：

<template>
  <div class="nuxt-welcome">
    <h1>{{ welcomeTitle }}</h1>
    <p>{{ welcomeMessage }}</p>
    <!-- 添加任何其他HTML元素或动态内容 -->
    <button @click="redirectToMainPage">继续浏览</button>
  </div>
</template>

<script>
export default {
  name: 'CustomWelcome',
  data() {
    return {
      welcomeTitle: '欢迎来到我的Nuxt应用',
      welcomeMessage: '这是一个自定义的欢迎页面。'
    }
  },
  methods: {
    redirectToMainPage() {
      this.$router.push('/'); // 跳转到主页
    }
  }
}
</script>

<style scoped>
.nuxt-welcome {
  /* 根据需要添加样式 */
}
</style>

然后，确保你在 `nuxt.config.js` 文件中的 `build` 配置中包含了对自定义组件的处理：

export default {
  build: {
    transpile: ['~/components'], // 如果你的自定义组件在 components 目录下
    // 或者根据实际路径调整
  }
}

现在当你运行 `nuxt generate` 或 `nuxt start` 后，就会显示你的自定义欢迎页面。如果你想要覆盖默认的欢迎页，可以将此组件名称设置为 `_welcome`，而不是 `index.vue`。