Nuxt 3 是一款使得 web 开发变得更加简单，并且十分强大的开源框架。Nuxt 3 架构重新设计以后，内核变得更小，获得了更快的性能和对开发者更加友善的体验。
Nuxt 3 具有轻量且快速的特性并且使用 Composition API 使得代码的复用性更好 ，支持 Webpack5 以及 Vite 来进行打包，这意味着我们包的构建速度更快，体积更小，在生产环境可以使用 Webpack，而开发环境使用 Vite，简直完美。Nuxt 3 的开发使用 Vue3 和 TypeScript。
开始之前
在开始使用之前，请确保已经安装了以下推荐的程序
- Node.js
- Visual Studio Code
- Volar（VSCode 插件）
如果你已经安装好了 Node.js，请通过
node —version检查一下版本是否是v14或v16。
友情提示：Nuxt 3 目前还只是处于 beta 阶段，不建议在生产环境中使用
创建项目
也可以直接在 SandBox 上在线体验。
创建新项目
在 terminal 中输入以下命令来创建一个 Nuxt 3 的项目
npx nuxi init <project-name>
复制代码项目创建成功以后切入到文件中
cd <project-name>
复制代码安装依赖项
yarn
复制代码启动项目
yarn dev -o
复制代码接下来你到项目将会在浏览器中打开，看到如下页面，项目成功运行起来了。
通过 VSCode 打开项目，查看文件夹如下：
app.vue
其中 app.vue 文件是我们的开发入口组件，我们在这个文件中中书写的任何 JS 和 CSS 都是全局作用的。
// app.vue
<template>
<div>
<NuxtWelcome />
</div>
</template>
复制代码我们看到的页面展示内容就是 <NuxtWelcome> 这个组件。
在 Nuxt 3 中我们可以创建一个 pages 文件夹用来做路由配置。如果我们不使用 pages 文件夹，那么 Nuxt 也不包含有 vue-router 的依赖了。
如果我们创建了 pages 这个文件夹，我们可以通过 <NuxtPage> 这个组件做路由的输出。
// app.vue
<template>
<div>
<NuxtPage />
</div>
</template>
复制代码因为
Nuxt在<NuxtPage>中 使用了<Suspense>，所以建议在外面包裹单个根元素
pages（路由）
在 Nuxt 中会自动将 Vue-Router 和 pages 目录映射集成到应用程序的路由中。这也意味着我们只需要在 app.vue 中添加 <NuxtPage> 组件，然后直接在 pages 目录中写对应的路由文件即可，Nuxt 会自动根据 pages 中的结构自动生成 vue-router 的配置，然后添加到应用中。我们来试一试吧！
app.vue文件中根元素下添加<NuxtPage />- 创建
pages文件夹，并添加两个路由页面
其中 index.vue 作为我们的首页，page1.vue 和 page2.vue 分别作为 /page1 和 /page2 路由展示页面。
nuxt3-app
├─ .gitignore
├─ README.md
├─ app.vue
├─ nuxt.config.ts
├─ package.json
├─ pages
│ ├─ index.vue
│ ├─ page1.vue
│ └─ page2.vue
├─ tsconfig.json
└─ yarn.lock
复制代码地址栏中分别输入这三个地址就能分别看到对应文件的页面了。
嵌套路由
嵌套路由其实非常简单，只需要在 pages 中创建路由文件时创建成文件夹包裹的文件，如
pages/page1/test.vue 就表示着 /page1/test 这个路径。
路由导航
在 Nuxt 中，路由跳转与 vue 项目当中使用 <router-link> 来做页面跳转类似，通过设置属性 to="" 来跳转到某个路由，不同点在于 Nuxt 中使用的是 <NuxtLink>
// app.vue
<template>
<div>
<NuxtLink to="/page1" >to page1</NuxtLink>
<hr />
<NuxtLink to="/page2" >to page2</NuxtLink>
<NuxtPage />
</div>
</template>
复制代码总结：本节简单的介绍了一下 Nuxt 具有哪些特性，如何下载安装，以及 app.vue 的一些特性，和如何进行路由配置、嵌套路由和路由切换。
明天我们将会补充路由这一部分，包含动态路由，路由传参等。