【发布时间】：2022-08-16 22:26:35
【问题描述】：
我按照基本教程来启动一个 nuxt3 项目：
cd /myfolder
yarn init -y
yarn add --dev nuxt3
yarn nuxi create nuxt3-app
cd nuxt3-app
yarn install
yarn dev -o
然后我删除app.vue。
我创建目录：
mkdir components pages layouts
和文件：
touch components/Header.vue
touch pages/index.vue
touch layouts/default.vue
// components/Header.vue
<template>
<div>
HEADER
</div>
</template>
// pages/index.vue
<template>
<div>
INDEX
</div>
</template>
// layouts/default.vue
<template>
<div>
<Header />
<slot />
</div>
</template>
但是不包括Header 组件。如果我连接到http://localhost:3000，我只会看到INDEX 这个词。
我怎么了？
我已经按照官方文档上的教程进行操作：
https://v3.nuxtjs.org/getting-started/installation
https://v3.nuxtjs.org/docs/directory-structure/components/
Nuxt project info:
------------------------------
- Operating System: `Linux`
- Node Version: `v16.13.1`
- Nuxt Version: `3.0.0-27459267.f69126e`
- Package Manager: `yarn@1.22.17`
- Builder: `vite`
- User Config: `-`
- Runtime Modules: `-`
- Build Modules: `-`
------------------------------
-
您应该在
index页面中包含Header组件而不是布局，因为只考虑slot。 -
那么如何在每个页面中添加一个标题呢？此外，如果您检查文档，则 Header 包含在布局中。
-
我认为您正在混合 Nuxt2 和 Nuxt3。 Nuxt3 文档说您需要使用 <NuxtLayout> 来使用布局。 v3.nuxtjs.org/docs/directory-structure/layouts
标签： vue.js components nuxt.js vuejs3 nuxtjs3