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>

好了，分享结束，谢谢点赞，下期再见！