2-《手把手教您使用Nuxt3框架(Nuxt3中文开发教程)》初识Nuxt3

《手把手教您使用Nuxt3框架(Nuxt3中文开发教程)》全文电子档将分章节陆续在“nuxt”微信订阅号原创发布,敬请关注。如果您等不及,急切提前阅读和实操,可以在订阅号中有偿获取完整电子教程和后续持续更新版本。

本教程配套示例源码下载和在线预览网址:https://www.dvtop.cn

互联网前端技术的发展总是适应着用户需求和互联网环境变化,从传统页面和数据混合一起的SSR(服务端渲染),到前后台分离的CSR(客户端渲染),再到基于Nuxt3的混合渲染,都是为了满足各种场景下应用的需求,并没有谁好谁差,也有可能同一个项目使用多种方式组合使用,最终适合自己应用和最高性价比的就是最佳。

Nuxt 3是基于Vite、Vue3和Nitro的Nuxt框架的全新重写,具有一流的Typescript支持,是两年多研究、社区反馈、创新和实验的结果。

Nuxt.js是基于Vue.js创建的混合渲染应用框架,一般使用Nuxt.js多是用来解决SEO的问题。

Nuxt.js和Vue.js也有些区别,主要包括:目标产物、网页渲染流程、部署流程、项目入口页面、路由配置、Webpack配置、生命周期、后台数据获取、vuex状态持久化等。

注意:Nuxt3使用MIT许可证,意味着您在软件和软件的所有副本中包含版权声明和许可声明后,就有使用、复制、修改、合并、出版发行、散布、再授权及贩售软件及软件的副本的权利。

2.1 框架特色

使用Vue3构建您的下一个应用,体验混合渲染、强大的数据获取和新功能。Nuxt3是一个开源框架,使Web开发变得简单而强大。

更轻量

更快

Hybrid

以现代浏览器为目标的情况下,服务器部署和客户端产物最多可达75倍的减小。

用动态服务端代码分割来优化冷启动,由 Nitro 提供能力。

增量静态生成和其他高级模式现在都成为可能。

Suspense

Composition API

Nuxt CLI

导航前后皆任何组件中获取数据。

使用 Composition API 和 Nuxt 3 的 composables 实现真正的可复用性。

全新的零依赖体验,助您轻松搭建项目和集成模块。

Nuxt Devtools

Nuxt Kit

Webpack 5

更多的信息和快速修复,在浏览器中高效工作。

全新的基于 TypeScript 和跨版本兼容的模块开发。

更快的构建速度和更小的构建产物,并且零配置。

Vite

Vue3

TypeScript

用 Vite 作为你的打包器,体验轻量级的快速 HMR。

Vue3 会成为您下一个应用的坚实基础。

由原生 TypeScript 和 ESM 构成 —— 没有额外的步骤。

2.2 渲染流程

Nuxt3的渲染方式可以通过约定或配置来划分(包括客户端渲染、服务端渲染、混合渲染),也可以通过部署方式决定(如CDN边缘计算渲染),以适应各种应用场景。其实日常应用较多的是混合渲染,以下图介绍渲染总体流程。

2-《手把手教您使用Nuxt3框架(Nuxt3中文开发教程)》初识Nuxt3_第1张图片

2.3 版本演进

对Nuxt最近3个版本进行比较,Nuxt3是混合渲染开发的首选。

功能 / 版本

Nuxt 2

Nuxt Bridge

Nuxt 3

Vue

2

2

3

Stability

Stable

Semi-stable

Stable

Performance

√Fast

√√Faster

√√√Fastest

Nitro Engine

×

ESM support

 Partial

 Better

TypeScript

Opt-in

Partial

Composition API

×

Partial

Options API

Components Auto Import

你可能感兴趣的:(Nuxt3中文开发教程,webpack,javascript,前端,vue.js,node.js)