快捷搜索:  汽车  科技

Nuxt 3.0 稳定版(从Nuxt3开始)

Nuxt 3.0 稳定版(从Nuxt3开始)2. 自动导入——Nuxt3 的一个主要变化是,如果你正确地构建你的项目目录,Nuxt3 会理解你需要的文件,并会在编译期间自动导入它。您不需要显式导入文件。1. Composition API——如果你以前用过 Vue3 编码,你就会知道 Composition API。 Nuxt2 不支持它,而是 Nuxt2 开发人员继续使用 Options API。随着网站的复杂性不断增加,我们需要跟上不断变化的变化。 一旦软件的某些部分开始变得复杂且难以处理和测试,我们就会创建另一个抽象层来简化所做的工作。 开发人员看到了像 VueJs 这样的框架并想,“是的,它很棒,但还不够。” 这就是 NuxtJs 进入现场的地方。 NuxtJs 是一个建立在 VueJs 之上的框架。Nuxt3 相对于 Vue3 有什么好处?对于中大型应用程序,使用 Nuxt3 优于 Vue3 有很多好处:

Nuxt 3.0 稳定版(从Nuxt3开始)(1)

Nuxt3 上周宣布了它的 RC 版本。 自从 Nuxt2 大受欢迎以来,这是一个期待已久的框架。 随着越来越多的用户使用 Vue.js 框架开发网站,学习 Nuxt.js 不仅对您的技能组合,而且对行业而言都是一大优势。

什么是框架?

回到我们使用简单的 Html、CSS 和 Vanilla JavaScript 创建网站的日子里,我们最终拥有大量样板代码,并且随着网站的复杂性随着时间的推移而变得杂乱无章。 一个解决方案是创建一个框架,允许开发人员以更复杂和系统的方式构建网站。 然后,此代码在内部捆绑到浏览器解释的 Vanilla JS 中。 AngularJs、VueJs、SvelteJs 都是 JavaScript 框架。

什么是元框架?

随着网站的复杂性不断增加,我们需要跟上不断变化的变化。 一旦软件的某些部分开始变得复杂且难以处理和测试,我们就会创建另一个抽象层来简化所做的工作。 开发人员看到了像 VueJs 这样的框架并想,“是的,它很棒,但还不够。” 这就是 NuxtJs 进入现场的地方。 NuxtJs 是一个建立在 VueJs 之上的框架。

Nuxt3 相对于 Vue3 有什么好处?

对于中大型应用程序,使用 Nuxt3 优于 Vue3 有很多好处:

1. Composition API——如果你以前用过 Vue3 编码,你就会知道 Composition API。 Nuxt2 不支持它,而是 Nuxt2 开发人员继续使用 Options API。

2. 自动导入——Nuxt3 的一个主要变化是,如果你正确地构建你的项目目录,Nuxt3 会理解你需要的文件,并会在编译期间自动导入它。您不需要显式导入文件。

3. 基于目录的路由——Nuxt2 本身的一个特性。网站上的路由是根据您使用文件夹和文件构建项目的方式完成的。在普通的 Vue 应用程序中,您必须明确定义要呈现的路由和组件。

4、Universal Rendering——Nuxt3的核心特性之一是Universal Rendering的引入。通用渲染意味着当第一次向网站发出请求时,服务器会发回一个包含所有元素的 Html 页面(更适合 SEO),但该页面还不是交互式的。然后它发送使页面具有交互性的 JavaScript 文件。它的性能也很棒;但是,此过程将使用更多服务器。

5. Nitro Server——您现在甚至可以在 Nuxt 项目中创建自己的服务器代码。以前,要为项目构建服务器,它必须位于单独的代码库中;但不再是了!

Nuxt3 入门

您将需要一些先决条件来创建 Nuxt3 项目。

1. Node——你需要在你的机器上安装 Node。

2. 文本编辑器 — 使用您最喜欢的文本编辑器或 IDE 进行开发。

3. Git——(可选)Git 是一个版本控制系统。

现在您可以打开终端并导航到您希望项目所在的目录。运行以下命令,将 <app-name> 替换为项目名称。 npx nuxi init <app-name> 将为您创建一个 Nuxt3 项目。 在您的文本编辑器/IDE 中打开项目。

Nuxt 3.0 稳定版(从Nuxt3开始)(2)

您现在可以 cd 进入项目并使用 npm、yarn 或 pnpm 安装依赖项。 要在浏览器中查看启动代码,请运行命令 npm start dev ,您将看到以下内容:

Nuxt 3.0 稳定版(从Nuxt3开始)(3)

您已经创建了您的第一个 Nuxt3 项目!

猜您喜欢: