01. Nuxt3简介与环境搭建

目录
文章目录隐藏
  1. 前言
  2. Nuxt3 的简介
  3. Nuxt3 的安装
  4. Nuxt3 的优势介绍
  5. 结语

前言

笔者从 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 的安装

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

npx nuxi init nuxt3-test

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

npm -v

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

直接下载:点击这里

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

Nuxt3 的安装成功提示

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

  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 官网的图片,列出 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 的目录结构相关知识,精彩不容错过哦!

「点点赞赏,手留余香」

3

给作者打赏,鼓励TA抓紧创作!

微信微信 支付宝支付宝

还没有人赞赏,快来当第一个赞赏的人吧!

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » 01. Nuxt3简介与环境搭建

发表回复