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 的安装

本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的目录结构相关知识,精彩不容错过哦!

「点点赞赏,手留余香」

1

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

微信微信 支付宝支付宝

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

声明:
1. 本站所有文章教程及资源素材均来源于网络与用户分享或为本站原创,仅限用于学习和研究。
2. 如果内容损害你的权益请联系客服QQ:1642748312给予处理。
码云笔记 » 01. Nuxt3简介与环境搭建

发表回复

IT互联网行业相关广告投放 更专业 更精准

立即查看 联系我们