Nuxt3入门

Nuxt3入门很简单。前置条件在开始之前，请确保Nodejs的版本是v14或者是v16。选择Nuxt3或者Bridge接下来，你要确定的是你是要从头开始，还是要将已经存在的nuxt2，通过Nuxt bridge升级到nuxt3。从头开始享受Vue3吧所有新的组合都将可用启用了新的模板和约定升级Nuxt2项目如果您已有 Nuxt 2 项目，我们强烈建议您从使用 Nuxt Bridge 开始。通过这种

不与菜鸡互啄

2621人浏览 · 2021-10-17 16:32:05

不与菜鸡互啄 · 2021-10-17 16:32:05 发布

Nuxt3入门很简单。

前置条件

在开始之前，请确保Nodejs的版本是v14或者是v16。

选择Nuxt3或者Bridge

接下来，你要确定的是你是要从头开始，还是要将已经存在的nuxt2，通过Nuxt bridge升级到nuxt3。

从头开始

享受Vue3吧

所有新的组合都将可用

启用了新的模板和约定

升级Nuxt2项目

如果您已有 Nuxt 2 项目，我们强烈建议您从使用 Nuxt Bridge 开始。通过这种方式，你可以尝试大多数新功能，同时将破坏性更改降至最低。

这是无风险的！您始终可以从配置中删除该模块
使你的项目（几乎）为 Nuxt 3 做好准备
享受新的 DX 改进，无需对 Vue 3 进行重大重写
使用 Nitro 引擎进行平台无关和优化的部署
帮助我们稳定 Nuxt 3 并发现缺陷
Nuxt Bridge 目前比 Nuxt 3 更稳定

具体步骤，见下一篇文章

Nuxt2，Nuxt Bridge，Nuxt3的比较

在下表中，对 3 个版本的 nuxt 进行了快速比较：

功能/版本	努克斯 2	纽斯特桥	第 3 期
稳定性	😊稳定	😌 半稳定	😬 不稳定
性能	🏎 快	✈️更快	🚀 最快
Nitro Engine	❌	✅	✅
ESM 支持	🌙 部分	👍 更好	✅
TypeScript	☑️ 选择加入	🚧 更快	✅
Composition API	⚠️ 已弃用	✅	✅
Options Api	✅	✅	✅（不推荐）
Components Auto Import	✅	✅	✅
`<script setup>` syntax	❌	🚧 部分	✅
Auto Imports	❌	✅	✅
Webpack	4	4	5
Vite	⚠️ 部分	🚧 部分	🚧 实验性的
Nuxi CLI	❌ 旧	✅ nuxi	✅ nuxi
Static Sites	✅	✅	🚧

下一篇文章，将介绍如何构建nuxt3

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^