首页技术文章Nuxt 3.8 正式发布_nuxt用的多吗

Nuxt 3.8 正式发布_nuxt用的多吗

发布时间：2025-02-19 11:47:10
·
21 阅读
·
0 评论
文章标签： bootstrap 404

大家好，我是Echa。

好消息，2023年10月19号Nuxt官方正式发布v3.8版本。距离Nuxt v3.7正式版（2023年8月25日），相距只有短短55天时间。不得不说 Nuxt开发团队在世界都开始内卷的情况，更新如此频繁，简直实力非凡，为了抢占前端市场，也是拼了命的快速迭代更新。同时兼容其他底层扩展组件，Nuxt的发展，离不开Nuxt开发团队，小编非常看好Nuxt。

借此机会，小编给大家详细介绍Nuxt 到底是什么，能做什么，以及介绍Nuxt 3.8到底更新了哪些内容，下面小编一一给大家讲解。

全文大纲

  1. Nuxt 介绍
  2. 为什么要选择 Nuxt？
  3. 手把手教你搭建自己的Nuxt
  4. Nuxt 3.8 更新内容

Nuxt 介绍

传送门：https://nuxt.com/

Github：https://github.com/nuxt/nuxt


Nuxt 是一个免费的开源框架，以直观和可扩展的方式使用 Vue.js 创建类型安全、高性能和生产级的全栈 web 应用程序和网站。

我们所做的一切都是为了让您可以从一开始就编写.vue 文件，同时在开发中享受热模块替换，在生产中享受默认服务器端渲染的高性能应用程序。


特性

  • 基于 Vue.js
    • Vue、Vue Router、Vuex、Vue SSR
  • 自动代码分层
  • 服务端渲染
  • 强大的路由功能，支持异步数据
  • 静态文件服务
  • ES2015+ 语法支持
  • 打包和压缩 JS 和 CSS
  • HTML 头部标签管理
  • 本地开发支持热加载
  • 集成 ESLint
  • 支持各种样式预处理器： SASS、LESS、 Stylus 等等
  • 支持 HTTP/2 推送

自动化和惯例

Nuxt 使用约定和意见目录结构来自动执行重复性任务，并允许开发人员专注于推送功能。配置文件仍然可以自定义和覆盖其默认行为。

  • 基于文件的路由

根据页面/目录的结构定义路由。这样可以更容易地组织您的应用程序，并避免手动路由配置的需要。

  • 代码拆分

Nuxt 自动将代码分割成小块，这有助于减少应用程序的初始加载时间。

  • 开箱即用的服务器端渲染

Nuxt 具有内置的 SSR 功能，因此您无需自行设置单独的服务器。

  • 自动导入

在各自的目录中写入 Vue 组合式函数和组件，无需导入即可使用，并具有树状结构和优化的 JS bundle 的优点。

  • 数据获取工具

Nuxt 提供了组合式函数处理 SSR 兼容性数据获取以及不同策略的组件。

  • 零配置支持 TypeScript

使用我们自动生成的类型和 tsconfig.json 编写类型安全的代码，而无需学习 TypeScript

  • 配置构建工具

我们默认使用 Vite 来支持开发中的热模块替换（HMR），并将您的代码与最佳实践打包应用于生产环境。

服务器端渲染


Nuxt 默认内置服务器端渲染（SSR）功能，无需自行配置服务器，这对网络应用程序有很多好处：

  • 更快的初始页面加载时间

Nuxt 向浏览器发送完全渲染的 HTML 页面，该页面可立即显示。这可以提供更快的页面加载时间和更好的用户体验（UX），特别是在较慢的网络或设备上。

  • 改进搜索引擎优化 SEO

搜索引擎可以更好地索引 SSR 页面，因为 HTML 内容是立即可用的，而不是需要 JavaScript 在客户端呈现内容。

  • 在低配置设备上性能更佳

它减少了客户端需要下载和执行的 JavaScript 的数量，这对于处理大量 JavaScript 应用程序的低功率设备来说是有益的。

  • 更好的无障碍性

在初始页面加载时，内容立即可用，从而提高了依赖屏幕阅读器或其他辅助技术的用户的可访问性。

  • 缓存更容易

页面可以在服务器端缓存，这样可以减少生成和向客户端发送内容所需的时间，从而进一步提高性能。

总的来说，服务器端渲染可以提供更快、更高效的用户体验，并提高搜索引擎优化和可访问性。

由于 Nuxt 是一个多功能框架，因此您可以使用nuxt generate将整个应用程序静态渲染到一个静态主机，使用ssr: false选项全局禁用 SSR，或者通过设置routeRules选项利用混合渲染。



服务端渲染与客户端渲染对比


最大的区别，简单点来说就是责任越大压力越大(谁渲染谁压力大)
1)服务端渲染优缺点：
优点：前端耗时少、有利于SEO、无需占用客户端资源、后端生成静态文件
缺点：不利于前后端分离、占用服务器资源
适用于应用交互不太复杂需要良好的SEO且服务器性能好
2)客户端渲染优缺点：
优点：有利于前后端分离、服务器压力小
缺点：前端响应慢、不利于SEO
适用于应用交互复杂且不需要良好的SEO，例如企业内部系统

为什么要选择Nuxt ？



1、模块化

Nuxt 基于一个强大的模块化架构。你可以从 50 多个模块中进行选择，让你的开发变得更快、更简单。支持 PWA 、添加谷歌分析到你的网页或生成网站地图，这些功能都无需重新发明轮子来获得。

2、高性能

Nuxt.js 默认会优化你的应用程序，尽可能地利用 Vue.js 和 Node.js 的最佳实践来构建高性能的应用程序。Nuxt 帮你把所有不需要的比特都从你的应用程序中剔除，并且还包含了一组分析器，以便更好地优化你的应用程序。

3、友好

官方团队首要关注的是开发者的使用体验。官方喜欢 Nuxt.js 并不断改进这个框架，相信你也会喜欢它的！
Nuxt.js 具备有吸引力的解决方案、描述清晰的错误消息、强大的默认值和详细的文档。如果有问题或遇到困难，官方的社区会帮助你解决。

总结：快速 简单、约定式开发。

手把手教你搭建自己的Nuxt


Nuxt.js 十分简单易用。一个简单的项目只需将 nuxt 添加为依赖组件即可。

运行 create-nuxt-app

为了快速入门，Nuxt.js 团队创建了脚手架工具 create-nuxt-app。

Github：https://github.com/nuxt/create-nuxt-app

确保安装了 npx（npx 在 NPM 版本 5.2.0 默认安装了）：

npx create-nuxt-app <项目名>

或者用 yarn ：

yarn create nuxt-app <项目名>

它会让你进行一些选择:

  1. 在集成的服务器端框架之间进行选择:
  • None (Nuxt 默认服务器)
  • Express
  • Koa
  • Hapi
  • Feathers
  • Micro
  • Fastify
  • Adonis (WIP)
  1. 选择您喜欢的 UI 框架:
  • None (无)
  • Bootstrap
  • Vuetify
  • Bulma
  • Tailwind
  • Element UI
  • Ant Design Vue
  • Buefy
  • iView
  • Tachyons
  1. 选择您喜欢的测试框架:
  • None (随意添加一个)
  • Jest
  • AVA
  1. 选择你想要的 Nuxt 模式 (Universal or SPA)
  2. 添加 axios module 以轻松地将 HTTP 请求发送到您的应用程序中。
  3. 添加 EsLint 以在保存时代码规范和错误检查您的代码。
  4. 添加 Prettier 以在保存时格式化/美化您的代码。

当运行完时，它将安装所有依赖项，因此下一步是启动项目:

cd 
npm run dev

应用现在运行在 http://localhost:3000 上运行。

asset:资源目录 assets 用于组织未编译的静态资源如 LESS、SASS 或 JavaScript,图片和css等静态文件都要存放的asset目录下，否则打包之后会出现找不到资源的情况

components：组件目录，用来存放自定义组件的目录，跟一般的vue组件没有区别

layouts：布局目录，可以在里面写默认布局文件，注意默认布局文件的名称必须是default.vue，并且layouts文件夹的目录没有必要的情况下不要更改。注意：default.vue默认是不存在的，如果要改布局需要自己添加

middleware 目录用于存放应用的中间件。中间件可以理解为经过不同的路由时都会执行的函数，这里我没有使用就不再赘述可以自己看文档

pages：页面目录 pages 用于组织应用的路由及视图。Nuxt.js 框架读取该目录下所有的 .vue 文件并自动生成对应的路由配置。若无额外配置，该目录不能被重命名。值得注意的是：nuxt中是不需要你手写路由的，直接在pages里面增加文件夹即可。例如要增加一个路由为news的页面，只需要在pages文件夹里面新建一个news文件夹里面新建一个index.vue文件即可。当然你也可以看到对应的router.js文件

不同页面之间的跳转使用nuxt-link组件即可，传递对应的name即可，也可以传递参数，用params属性传递即可

{{ item.name }}

plugins：插件目录 plugins 用于组织那些需要在 根vue.js应用 实例化之前需要运行的 Javascript 插件。

注意：在nuxt中使用插件和在一般的vue中是有很大差别的

一般只需要npm 安装对应的包，然后在main.js中引入和使用即可

但是在nuxt中你需要在plugins文件夹中定义对应的js来引入插件，然后再nuxt,config.js中来配置才能使用

例如我要使用element-ui

首先要npm 安装

然后需要再plugins文件夹里面顶一个JS来进行引入和使用，JS的名字随便起

然后在nuxt.config.js中引入这个js，

对于element这种需要引入css的插件还需要，在nuxt.config.js里面的css配置项里面引入对应的样式库

static:静态文件目录 static 用于存放应用的静态文件，此类文件不会被 Nuxt.js 调用 Webpack 进行构建编译处理。服务器启动的时候，该目录下的文件会映射至应用的根路径 / 下。

store 目录用于组织应用的 Vuex 状态树 文件。 Nuxt.js 框架集成了 Vuex 状态树 的相关功能配置，在 store 目录下创建一个 index.js 文件可激活这些配置。

这里和一般的vue项目中使用vuex没什么区别

nuxt.config.js 文件：nuxt.config.js 文件用于组织 Nuxt.js 应用的个性化配置，以便覆盖默认配置。

这个文件很关键，项目打什么类型的包，以什么方式运行以及一些三方插件库都需要在这里面配置，包括一些SEO优化还有html的头部都是在这里配置。

这里我只说几个关键和常用的配置选项，其他的有兴趣可以去看官网。

ssr配置项，可以设置true和false，j是否启动ssr渲染,ssr:true是默认值

target:static/server,采用静态渲染还是服务端渲染

一般情况下ssr:true与target:server一起使用，然后执行npm run build即可构建一个ssr的包，发布到服务器即可完成ssr。

如果要打一个spa的包只需要设置ssr:false即可，target配置项不需要设置

如果要打一个静态部署的包你需要设置ssr:true,target:static

使用flexable.js和postcss-pxtorem插件来进行PC端的适配

这里主要是做一个官网的项目，所以要针对不同的PC端屏幕进行适配。
我采用的是flexable.js和postcss-pxtorem。我一开始用的是postcss-px2rem后来发现和nuxt引入公共css的时候发生了冲突所以改用了postcss-pxtorem。

先npm 安装包然后定义一个JS在plugins文件夹里面引入

再在nuxt.config.js里面配置plgins配置项

到这里就完成了对flexable.js的引入和使用。

但是因为flexable.js主要是适配移动端的所以我们要对其源码进行更改

node_modules\lib-flexible\flexible.js文件中

refreshRem方法

下一步就是引入postcss-pxtorem。

build: {
    postcss: {
      plugins: {
        "postcss-pxtorem": {
          rootValue: 192,
          propList: ["*"],
          minPixelValue: 2
        }
      }
    },
  },

这样就完成了适配

Nuxt 3.8 更新内容

Nuxt 3.8 正式发布，带来了内置 Devtools、自动安装 Nuxt Image、新的应用清单等许多功能。

Nuxt CLI 提升

现在正在使用新的 Nuxt CLI，它已经独立进行版本管理。

现在可以使用以下命令来安装模块：

nuxi module add

现在与 Vite 的 WebSocket 共享同一个端口，这意味着在开发中更好地支持 Docker 容器。

内置 Nuxt DevTools

Nuxt DevTools v1.0.0 已经发布，它已准备好作为 Nuxt 的直接依赖项发布。

请见小编之前发布的《Nuxt DevTools 详细介绍》

自动安装 Nuxt Image



和 是内置组件。现在，会在首次使用时自动安装 @nuxt/image

如果你在网站中使用图像，建议使用@nuxt/image，它可以应用优化来提高网站的性能。

更深层次的布局扫描

现在支持扫描 ~/layouts 中子文件夹内的布局，就像扫描 ~/components 一样。


其中最显著的改进是现在通过使用原生的fetch（在Node 18+中受支持）来在生产环境中减少约 40% 的捆绑包大小。因此，如果可能的话，建议将 Node 版本至少升级到 18 以上。

应用清单

现在支持内置的应用清单，它会在 /_nuxt/builds/meta/.json 位置生成一个清单文件。

它可以仅在预渲染的路由中加载有效载荷，如果是通过nuxt generate生成站点，还可以避免控制台中出现 404 错误。

它还启用了客户端路由规则。目前仅支持重定向路由规则；在执行客户端导航时，它们将进行重定向。

// nuxt.config.ts
export default defineNuxtConfig({
  routeRules: {
    '/about': { redirect: '/about-us' }
  }
})

// pages/index.vue

应用清单还可以实现未来的增强功能，包括通过检查 /_nuxt/builds/latest.json 来检测新部署。

如果需要，可以通过在 nuxt.config 文件中将 experimental.appManifest 设置为 false 来选择启用此行为。

范围和上下文的改进

现在为在插件中执行的 Nuxt 组合式函数定义了一个“范围”，这使得在离开网站之前可以运行同步清理操作，并使用 Vue 的onScopeDispose生命周期方法。

现在还支持 Vue composition API 的原生异步上下文，支持在 Node 和 Bun 上启用实验性的asyncContext，以支持原生的异步上下文功能。

如果遇到 Nuxt instance unavailable 这个问题，启用此选项可能会解决这个问题：

// nuxt.config.ts
export default defineNuxtConfig({
  experimental: {
    asyncContext: true
  }
})

一旦 Nuxt.js 有了跨运行时支持，将默认启用这个选项。

NuxtLink 默认值

可以使用 defineNuxtLink 工具定义自己的 组件。现在可以直接在nuxt.config文件中自定义内置的选项。

这样就可以在整个站点内强制使用尾部斜杠行为，例如：

// nuxt.config.ts
export default defineNuxtConfig({
  experimental: {
    defaults: {
      nuxtLink: {
        activeClass: 'nuxt-link-active',
        trailingSlash: 'append'
      }
    }
  }
})

数据请求改进优化

useAsyncData 和 useFetch 有两个非常重要的新功能：

  1. 现在可以设置deep: false来防止在从这些组合式函数返回的数据对象上进行深度响应。如果返回大型数组或对象，则这应该是一项性能优化。当重新获取对象时，它仍将更新；如果在数据的深层属性中更改某个属性，则它只会触发对象更新而不会触发响应式效果。
  2. 现在可以使用 getCachedData 选项来处理这些可组合项的自定义缓存。

除此之外，还支持在应用范围内为这些可组合项配置一些默认值：

// nuxt.config.ts
export default defineNuxtConfig({
  experimental: {
    defaults: {
      useAsyncData: {
        deep: false
      },
      useFetch: {
        retry: false,
        retryDelay: 100,
        retryStatusCodes: [500],
        timeout: 100
      }
    }
  }
})

层级改进优化

现在更加谨慎地按照层级的顺序加载层级插件和中间件，始终将自己的插件和中间件放在最后加载。这意味着可以依赖层级可能注入的实用工具。

如果你正在使用远程层级，现在会将这些层级克隆到的node_modules/文件夹中，这样层级就可以使用项目的依赖项。

夜间发布渠道

每个 Nuxt 的main分支提交都会自动部署到一个新的版本，以供在正式发布之前进行测试。此次更新将从“edge发布渠道”改名为“nightly 发布渠道”，以避免与边缘部署混淆。

  • nuxt3 现在更名为 nuxt-nightly
  • nuxi-edge 现在更名为 nuxi-nightly
  • @nuxt/kit-edge 现在更名为 @nuxt/kit-nightly

Nitro v2.7

Nitro v2.7 已发布，包含大量改进和错误修复。

类型导入变化

注意：此更新可能需要更改项目中的代码。

Vue 要求类型导入必须是显式的（这样Vue编译器才能正确优化和解析类型导入，例如用于props等）。

因此，Nuxt.js 团队决定在 Nuxt 项目中默认启用 verbatimModuleSyntax，这将在没有显式类型导入的情况下抛出类型错误。要解决此问题，需要更新导入语句：

- import { someFunction, SomeOptions } from 'some-library'
+ import { someFunction } from 'some-library'
+ import type { SomeOptions } from 'some-library'

如果出于某种原因需要在项目中撤消此更改，可以设置以下配置：

// nuxt.config.ts
export default defineNuxtConfig({
  typescript: {
    tsConfig: {
      compilerOptions: {
        verbatimModuleSyntax: false
      }
    }
  }
})

更新

可以通过以下命令来更新最新版本：

	nuxi upgrade

最后

粉丝们，会搭建自己的Nuxt 的项目了吗？

欢迎在评论区留言讨论。

一台电脑,一个键盘,尽情挥洒智慧的人生;

几行数字,几个字母,认真编写生活的美好;

一 个灵感,一段程序,推动科技进步,促进社会发展。

创作不易，喜欢的老铁们加个关注，点个赞，打个赏，后面会不定期更新干货和技术相关的资讯，速速收藏，谢谢！你们的一个小小举动就是对小编的认可，更是创作的动力。

创作文章的初心是：沉淀、分享和利他。既想写给现在的你，也想贪心写给 10 年、20 年后的工程师们，现在的你站在浪潮之巅，面对魔幻的互联网世界，很容易把一条河流看成整片大海。未来的读者已经知道了这段技术的发展历史，但难免会忽略一些细节。如果未来的工程师们真的创造出了时间旅行机器，可以让你回到现在。那么小编的创作就是你和当年工程师们的接头暗号，你能感知到他们在这个时代的键盘上留下的余温。