Nuxt快速学习开发---Nuxt3视图Views

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