Nuxt3实战讲解

951 阅读2分钟

Nuxt.js是一个基于Vue.js的通用应用框架。

它提供了服务端渲染、路由、构建工具以及更多的功能,帮助你更快更方便地构建应用程序。

Nuxt3Vue3 全家桶的一员,让你能轻松实现SSR网页的制作。
Nuxt3Nuxt2 新增加了12项最新的特性,包括可以完全使用 Vue3 的所有语法,并且对 TypeScript 有很好的支持。

你需要先建立两个概念。

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

nuxt其实也可以很好的去做SSG,这个可以根据自己需要去开发这个任务。SSG可以SEO的同时,还可以高度缓存起来,大大降低服务器压力。

安装

执行命令

$ npx nuxi init nuxt3-app

如果你安装失败,或者安装很慢的话你需要多试几次,其实这个是国内网络问题造成的。

安装依赖

# 进入项目根目录
$ cd nuxt3-app
# 安装命令
$ pnpm i

启动服务

$ npm run dev

创建完成 Nuxt 3 项目,下一步就可以开始构建应用程序了。

nuxt3的优势

image.png

这张是Nuxt3官网的图片,列出Nuxt3的新特性,一共12个。

更轻量:以现代浏览器为基础的情况下,服务器部署和客户端产物最多减小75倍。

更快:用动态服务端代码来优化冷启动。

  • Hybird:增量动态生成和其他高级模式现在都成为可能。
  • Suspense: 导航前后可在任何组件中获取数据。
  • Composition API : 使用Composition API 和 Nuxt3的composables 实现真正的可复用性。
  • Nuxt CLI : 权限的零依赖体验,助你轻松搭建项目和集成模块。
  • Nuxt Devtools :专属调试工具,更多的信息和快速修复,在浏览器中高效工作。
  • Nuxt Kit :全新的基于 TypeScript 和跨版本兼容的模块开发。
  • Webpack5 : 更快的构建速度和更小的构建包,并且零配置。
  • Vite:用Vite作为你的打包器,体验轻量级的快速HMR。
  • Vue3: 完全支持Vue3语法,这一点特别关键。
  • TypeScript:由原生TypeScript和ESM构成,没有额外配置步骤。

参考文章

nuxt3 中文文档
nuxt3 官方