「时光不负，创作不停，本文正在参加2021年终总结征文大赛」
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 的一些特性，和如何进行路由配置、嵌套路由和路由切换。
明天我们将会补充路由这一部分，包含动态路由，路由传参等。
