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"
},
})
