Nuxt 官网地址： https://nuxt.com/
Nuxt 提供多个组件层来实现应用程序的用户界面。
- 入口文件 App.vue
- 组件 Components
- 页面 Pages
- 布局 Layouts
下面逐一进行介绍。
入口文件
默认情况下，Nuxt 会将 app.vue 文件视为入口点，并在应用程序的每个路由中呈现其内容。下面的代码片段是 app.vue 文件的基础代码结构：
// App.vue
<template>
<div>
<h1>Welcome to the homepage</h1>
</div>
</template>
如果您熟悉 Vue，可能会想知道 main.js 在哪里（通常创建 Vue 应用程序的文件）。Nuxt 在幕后完成了这项工作。
组件 Components
大多数组件都是用户界面中可重复使用的部分，如按钮和菜单。在 Nuxt 中，您可以在 components/ 目录中创建这些组件，它们将自动在您的应用程序中可用，而无需显式导入。
-
创建组件
在 components 目录下创建 AppAlert.vue 文件，即是创建了一个名为AppAlert的组件，应用启动后，它就被自动加载，无需导入即可使用。
// components/AppAlert.vue
<template>
<span class="warning">
<slot />
</span>
</template>
<style scoped>
.warning {
color: orange;
}
</style>
-
使用组件
在其他页面（如 app.vue）中直接使用：
// app.vue
<template>
<div>
<h1>Welcome to the homepage</h1>
<AppAlert>AppAlert Component.</AppAlert>
</div>
</template>
页面 Pages
页面代表每个特定路由模式的视图。pages/ 目录中的每个文件都代表了显示其内容的不同路由。
通过在 pages/ 目录下创建 .vue 文件以创建更多页面及其相应路由，并在 app.vue 中添加 <NuxtPage /> 组件来加载匹配当前路由模式的。
下面创建两个页面做示例：
- 创建 pages/index.vue 文件
<template>
<div>
<h1>@ index page</h1>
<AppAlert>AppAlert Component.</AppAlert>
</div>
</template>
- 创建 pages/about.vue 文件
<template>
<div>
<h1>@ about page</h1>
<AppAlert>AppAlert Component.</AppAlert>
</div>
</template>
创建的页面如何通过路由访问呢？此处先做简单介绍，后续会写一篇专门介绍路由的文章。
- 首先需要 nuxt.config.ts 增加配置项
pages:true - 在 App.vue 文件中增加
<NuxtPage />组件来展示请求的路由对应文件内容。 - pages 目录下 index.vue 文件将映射到应用程序的 / 根路由，其他文件则以文件名为路由。也就是说访问 http://localhost:3000 就展示 index.vue 的内容，访问 http://localhost:3000/about 就展示 about.vue 的内容
注意：pages/index.vue 只能通过 http://localhost:3000 来访问，不能通过 http://localhost:3000/index 访问（访问会报 404 错）。
布局 Layouts
布局是围绕包含多个页面的公共用户界面的页面的包装器，例如页眉和页脚显示。
布局是使用 组件显示页面内容的 Vue 文件。默认情况下将使用 layouts/default.vue 文件。
布局被放置在 layouts/目录中，使用时将通过异步导入自动加载。
如果您的应用程序中只有一个布局，我们建议您使用带有 NuxtPage 组件的 app.vue 代替。
默认布局的使用方法是将 <NuxtLayout> 添加到 app.vue 中。（更多自定义布局使用方法后续会写专篇文章来做分享）
- 创建默认布局文件
// layouts/default.vue
<template>
<div>
<div class="header">header Block</div>
<slot />
<div class="footer">footer Block</div>
</div>
</template>
<style scoped>
.header {
border-bottom: 1px solid #e0e0e0;
text-align: center;
}
.footer {
border-top: 1px solid #e0e0e0;
text-align: center;
}
</style>
- 使用布局
需要在 app.vue 文件中添加 <NuxtLayout> 组件：文章来源：https://www.toymoban.com/news/detail-683639.html
// app.vue
<template>
<div>
<NuxtLayout>
<NuxtPage />
</NuxtLayout>
</div>
</template>
此时再访问 http://localhost:3000 和 http://localhost:3000/about 就可以看到 layout 的效果了。文章来源地址https://www.toymoban.com/news/detail-683639.html
到了这里，关于Nuxt 菜鸟入门学习笔记三：视图的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
