01. Nuxt3简介与环境搭建

前言

笔者从 Nuxt2.x 开始接触这个框架，当年的选型，也主要因为它提供了开箱即用的 vue SSR 方案。当然，项目开始这一路走来，遇到的坑非常的多。不过相对于的技术收获也是很大的，因为我们不得不在这趟旅程中，接触许多平常未曾涉及的知识体系，这些对我们前端开发而言，大有裨益。

接下来，笔者也将用通俗易懂的文字和图片，带你进入 Nuxt3 的世界。

Nuxt3的简介

Nuxt3是基于Vue3发布的SSR框架，也是Vue全家桶系列的一员。如果你了解Nuxt2，应该也了解Nuxt3的使命和用途。但是如果你不了解，你需要先知道两个概念。

• SPA应用：也就是单页应用，这些多是在客户端的应用，不能进行SEO优化（搜索引擎优化）。
• SSR应用：在服务端进行渲染，渲染完成后返回给客户端，每个页面有独立的URL，对SEO友好。

所以如果你开发的应用是企业网站、商品展示 、博客这类型的展示型网站，就需要使用搜索引擎喜欢的SSR应用。当我们明白这两个概念后，再来看Nuxt3的使命。因为Vue开发的应用默认是单页应用（SPA应用），但如果你想针对于搜索优化，就需要使用Vue的SSR模式开发，而Nuxt3就是Vue的SSR开发的框架。

官网地址：点击这里

Nuxt3 的安装

本Nuxt3教程演示使用的代码编辑器是VSCode，如果你是新手，尽量也使用和我一样的代码编辑器，这样能最大程度的和我统一，让自己少踩坑。 打开 Visual Studio Code ，打开内置终端并输入下面命令创建一个nuxt项目：

npx nuxi init nuxt3-test

注意：npx是npm从5.2版开始增加的命令，所以说你的 npm 最小版本也要是5.2版本。查看npm版本的命令如下。

npm -v

当然，在墙内的同学，应该都会由于网络原因而失败，这里我给出了模板仓库链接，可以去下方直接下载。

直接下载：点击这里

直到出现下面的文字就算安装成功了：

上面这段提示，也告诉我们了接下来的三个步骤。

1. 使用cd nuxt3-test进入项目根目录.
2. 用npm install或者yarn install 来安装项目依赖包。
3. 用npm run dev或者 yarn dev来运行项目。

按照上面的三个步骤就应该可以启动起来项目了，项目启动后的效果如下。（你的IP地址可能会和我的不一样）

Nuxt CLI v3.0.0-27466220.7c0d2e1                                               
  > Local:    http://localhost:3000/ 
  > Network:  http://192.168.0.118:3000/
  > Network:  http://172.17.208.1:3000/
  > Network:  http://172.27.32.1:3000/

然后打开浏览器，输入http://localhost:3000，就可以看到下面的页面了。

如果看到上面的页面，说明你的安装已经顺利完成了。

Nuxt3的优势介绍

简单介绍一下Nuxt3对比Nuxt2的优势或者说作了那些改进。

上图是截取的Nuxt3官网的图片，列出Nuxt3的新特性，一共12个，让我们快速来解读一下。

1. 更轻量：以现代浏览器为基础的情况下，服务器部署和客户端产物最多减小75倍。
2. 更快：用动态服务端代码来优化冷启动。
3. Hybird：增量动态生成和其他高级模式现在都成为可能。
4. Suspense: 导航前后可在任何组件中获取数据。
5. Composition API : 使用Composition API 和 Nuxt3的composables 实现真正的可复用性。
6. Nuxt CLI ： 权限的零依赖体验，助你轻松搭建项目和集成模块。
7. Nuxt Devtools ：专属调试工具，更多的信息和快速修复，在浏览器中高效工作。
8. Nuxt Kit ：全新的基于 TypeScript 和跨版本兼容的模块开发。
9. Webpack5 ： 更快的构建速度和更小的构建包，并且零配置。
10. Vite：用Vite作为你的打包器，体验轻量级的快速HMR。
11. Vue3 ： 完全支持Vue3语法，这一点特别关键。
12. TypeScript：由原生TypeScript和ESM构成，没有额外配置步骤。

结语

以上就是本文关于Nuxt3教程的简介和环境搭建全部内容，如果你正好想学习Nuxt3的知识，就关注码云笔记前端博客，下节我们将编写第一个Nuxt3的Hello World 和讲解 Nuxt3的目录结构相关知识，精彩不容错过哦！