Nuxt3入门：介绍、项目安装和了解视图（第一节）
你好同学，我是沐爸，欢迎点赞、收藏、评论和关注。
有对 Nuxt3.0 感兴趣的小伙伴吗？一起来了解下
一、介绍
Nuxt is an open source framework that makes web development intuitive and powerful.
Create performant and production-grade full-stack web apps and websites with confidence.
Nuxt 是一个开源框架，使 Web 开发变得直观而强大。自信地创建高性能和生产级全栈 Web 应用程序和网站。
特性
- 基于文件的路由系统
- 组件自动导入功能
- SEO & Meta 标签
- 强大的中间件系统
- 内置状态管理
- 内置错误处理和日志记录
- 灵活的渲染模式
- TypeSript 支持
二、安装
先决条件
- Node.js - V18.0.0 或更高版本
- 编辑器 - 推荐使用带有 Vue 扩展（Vetur）的 VSCode
使用以下命令创建项目
npx nuxi@latest init <project-name>
运行后会提示两个选项：选择包管理工具，是否初始化代码仓库。
切换目录
cd <project-name>
启动应用
npm run dev -o
运行成功后，浏览器窗口将自动打开 http://localhost:3000。
三、视图
Nuxt 提供了多个组件层来实现应用程序的用户界面。
app.vue
默认情况下，Nuxt 会将此文件视为入口点，并为应用程序的每个路由呈现其内容。
app.vue 文件
<template>
<div>
<h1>Welcome to the homepage</h1>
</div>
</template>
组件 components
大多数组件都是用户界面的可重用部分，例如按钮和菜单。在 Nuxt 中，您可以在 components/ 目录中，它们将自动在您的应用程序中可用，而无需显式导入它们。
app.vue
<template>
<div>
<h1>Welcome to the homepage</h1>
<AppAlert> This is an auto-imported component. </AppAlert>
</div>
</template>
AppAlert.vue
<template>
<span>
<slot />
</span>
</template>
页面 pages
页面是应用程序的每个路由的入口点。在 Nuxt 中，页面位于pages/目录中。要使用页面，需要将<NuxtPage />组件放置在app.vue中。
app.vue
<template>
<div>
<NuxtPage />
</div>
</template>
pages/index.vue
<template>
<div>
<h1>Welcome to the homepage</h1>
<AppAlert> This is an auto-imported component </AppAlert>
</div>
</template>
pages/about.vue
<template>
<section>
<p>This page will be displayed at the /about route.</p>
</section>
</template>
布局 layouts
布局是页面组件的包装器，用于共享页面的公共部分，例如页眉和页脚。可以在layouts/目录中创建布局，default.vue表示默认布局。
app.vue
<template>
<div>
<NuxtLayout>
<NuxtPage />
</NuxtLayout>
</div>
</template>
layouts/default.vue
<template>
<div>
<AppHeader />
<slot />
<AppFooter />
</div>
</template>
components/AppHeader.vue
<template>
<div style="background: #ddd;">This is Header.</div>
</template>
components/AppFooter.vue
<template>
<div class="footer">This is Footer.</div>
</template>
<style scoped>
.footer {
background: #ddd;
width: 100%;
position: fixed;
bottom: 0;
}
</style>
pages/index.vue
<template>
<div>
<h1>Welcome to the homepage</h1>
<AppAlert> This is an auto-imported component </AppAlert>
</div>
</template>
好了，分享结束，谢谢点赞，下期再见！