Nuxt.js是一个基于Vue.js的通用应用框架。
它提供了服务端渲染、路由、构建工具以及更多的功能,帮助你更快更方便地构建应用程序。
Nuxt3 是 Vue3 全家桶的一员,让你能轻松实现SSR网页的制作。
Nuxt3 比 Nuxt2 新增加了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的优势
这张是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构成,没有额外配置步骤。