Views
Nuxt提供了几个组件层来实现应用程序的用户界面 默认情况下，Nuxt 会将app.vue文件视为入口点并为应用程序的每个路由呈现其内容
应用程序.vue
<template> <div> <h1>Welcome to the homepage</h1> </div> </template>Page
在nuxt中，页面代表每个特定路由模式的视图。目录中的每个文件pages/代表显示其内容的不同路径。 使用页面，创建pages/index.vue文件并将<NuxtPage />组件添加到app.vue（或删除app.vue默认条目）。
``pages/index.vue <template> <section> <p>这个页面将显示在根路径上，这是page/index页面</p> </section> </template> ````pages/about.vue <template> <section> <p>这个页面是page/about页面</p> </section> </template> ``下面我们将通过app.vue来控制进行跳转页面，其中关于， 见下例示代码注释，后续学习nuxt路由将进行更详细介绍。
//app.vue
<template><div><!-- 跳转到某个页面 --><div class="page mt-24"><!--通过传递 `to` 来指定链接 --> <!--`<NuxtLink>` 将呈现一个带有正确 `href` 属性的 `<a>` 标签。相当于vue中<router-link to="/">--><NuxtLink to="/">index page</NuxtLink><NuxtLink to="/about">about page</NuxtLink></div><div class="current-page"><div>当前页面：{{ route.name }}</div><div><!-- 路由出口 --> <!-- 路由匹配到的组件将渲染在这里，相当于vue中的<router-view></router-view> --><NuxtPage /></div></div><!-- 当前路由视图，默认pages下index.vue --></div></template><script setup lang="ts">const route = useRoute()</script>此时运行代码，我们将可以切换路由展示视图。
Components
大多数组件都是用户界面的可重用部分，例如按钮和菜单。在 Nuxt 中，您可以在目录中创建这些组件components/，它们将在您的应用程序中自动可用，而无需显式导入它们。
``components/title.vue
<template><div><h1>我是components/title 页面</h1></div>
</template>
``此时修改app.vue任意位置添加上< Title />运行，我们将看到components/title.vue将在页面中展示
Layouts
布局是页面的包装器，包含多个页面的通用用户界面，例如页眉和页脚显示。<slot />布局是使用组件显示页面内容的Vue 文件。layouts/default.vue默认情况下将使用该文件。自定义布局可以设置为页面元数据的一部分。我们通过写一个简单的layout布局能很好的理解这一部分内容：
-| layouts/
---| default.vue
---| custom.vue
---| layout.vue``layouts/layout.vue layout布局
<template><div><!-- <Button></Button> -->默认layout布局<div><LayoutHeader /><slot /><!-- 布局文件中，布局的内容会加载到 中`<slot />`，而不是使用特殊的组件 --><LayoutFooter /></div></div>
</template>
````components/layoutFooter.vue 页面底部
<template><div class="footer">-------------------------------------- footer -------------------------------------- </div>
</template>
````components/layoutHeader.vue 页面头部
<template><div class="footer">-------------------------------------- footer -------------------------------------- </div>
</template>
``启用默认布局
接下来通过修改app.vue来使用default布局,同样nuxt支持修改页面布局方式
``app.vue
<template><div><!-- 跳转到某个页面 --><div class="page mt-24"><!--通过传递 `to` 来指定链接 --> <!--`<NuxtLink>` 将呈现一个带有正确 `href` 属性的 `<a>` 标签。相当于vue中<router-link to="/">--><NuxtLink to="/">index page</NuxtLink><NuxtLink to="/about">about page</NuxtLink></div><Title></Title> <!--使用components/title.vue组件--><!--默认布局,通过:name=“”可以修改布局方式 --><NuxtLayout><div class="current-page"><div>当前页面：{{ route.name }}</div><div><NuxtPage /><!-- 当前路由视图，默认pages下index.vue --></div></div></NuxtLayout> </div></template><script setup lang="ts">const route = useRoute()</script>``设置另一个布局
可以像这样直接覆盖默认布局：
··app.vue
<template><NuxtLayout :name="layout"><NuxtPage /></NuxtLayout>
</template>
<script setup>
const layout = "custom";
</script>或者，您可以像这样覆盖每页的默认布局：
``layouts/custom.vue
<template><div>Some *custom* layout<slot /></div>
</template>``layouts/layout.vue
<template><div>Some *layout* layout<slot /></div>
</template>动态改变布局可以为布局使用 ref 或计算属性。
<template><div><button @click="enableCustomLayout">Update layout</button></div>
</template>
<script setup>
function enableCustomLayout () {setPageLayout('custom')
}
definePageMeta({layout: false,
});
</script>
在每页基础上覆盖布局
如果您正在使用~/pages集成，则可以通过设置layout: false然后使用<NuxtLayout>页面内的组件来完全控制。页面/index.vue布局/custom.vue
``layouts/custom.vue
<template><div><header><slot name="header">Default header content</slot></header><main><slot /></main></div>
</template>
Nuxt自定义配置使用的目录结构
除非需要，否则最好坚持使用默认值，nuxt会自动根据设置的命名生成目录结构
``nuxt.config.ts
export default defineNuxtConfig({dir: {//自定义Nuxt使用的目录结构，除非需要，否则最好坚持使用默认值。assets: "assets", //静态资源目录 默认： "assets"layouts: "layouts", //布局目录，其中的每个文件都会自动注册为 Nuxt 布局。 默认： "layouts"middleware: "middleware", //中间件目录，其中的每个文件都会自动注册为Nuxt中间件。默认： "middleware"pages: "pages", //将被处理以自动生成应用程序页面路由的目录。 默认： "pages"plugins: "plugins", // plugins 目录，其中的每个文件都会自动注册为 Nuxt 插件。默认： "plugins"public: "public", //dist包含静态文件的目录，可通过 Nuxt 服务器直接访问这些文件，并在生成应用程序时将其复制到文件夹中。 默认： "public"static: "static", //默认： "public"},
})
