Nuxt 3的新内容

迪鲁宾
1,013 阅读6分钟

期待已久的Nuxt 3测试版于2021年10月12日推出，这对Nuxt和Vue开发者生态系统来说是一个重要的日子。这是一个更新的版本，经过了重新架构，提高了性能和更轻的构建。而在这篇文章中，我们将看看Nuxt 3的新功能，以及安装过程和如何将你现有的Nuxt应用（Nuxt 2）迁移到这个最新版本。

从Nuxt 2迁移到Nuxt 3

注意，在我们开始之前，请记住，Nuxt 3目前只支持Node v14或v16。

虽然目前没有稳定的迁移技术来实现从Nuxt 2到Nuxt 3的平稳过渡，但Nuxt Bridge（我们将在后面详细讨论）可以用来尝试Nuxt 3在之前版本的一些新功能。

要做到这一点，首先从你的项目中删除任何package-lock 文件(package-lock.json 或yarn.lock)，然后删除Nuxt依赖，并在你的package.json 文件中为最新版本的nuxt-edge创建一个新条目。

- "nuxt": "^2.15.0"
+ "nuxt-edge": "latest"

下一步是重新安装你所有的依赖项。

npm install
# OR
yarn install

然后你就可以开始了!

你也可以选择安装Nuxt Bridge作为一个开发依赖。

npm install -D @nuxt/bridge@npm:@nuxt/bridge-edge
# OR
yarn add --dev @nuxt/bridge@npm:@nuxt/bridge-edge

然而，这样做也需要更新你的package.json 文件，以反映Nuxt现在将生成一个Nitro服务器作为构建结果的事实。

开始一个新的项目

在Nuxt 3中创建一个新的应用程序的过程与早期版本有很大不同。因为Nuxt 3还在测试阶段，你必须从初始化一个新的应用程序开始。

npx nuxi init project-name

下一步是安装生成的package.json 文件中的依赖项。

cd project-name
npm install
# OR 
yarn install

一旦这些步骤完成，我们就可以继续启动我们的应用程序。

npm run dev
# OR 
yarn dev

如果一切正常，一个浏览器窗口应该自动打开，http://localhost:3000，输出结果如下图所示。

Nuxt 3 localhost

v3中的新内容

Nitro引擎

Nuxt 3有一个新的跨平台的服务器引擎，为Nuxt应用程序增加了全栈功能。Nitro引擎还包括开箱即用的无服务器功能，并被认为是第一个能与当前广泛的云主机服务一起工作的JavaScript应用服务器。这使得将API集成到你的Nuxt应用中变得轻而易举。

要使用这个功能，只需在你的项目根目录下创建一个新的/server 目录。这个目录将存放你的项目的API端点和服务器中间件，Nuxt会自动读取/server/api 目录中的任何文件来创建API端点。

// server/api/hello.js
export default async (req, res) => {
  return {
    foo: "bar",
  };
};

这将生成一个新的API端点，可以在http://localhost:3000/api/hello。

服务器中间件

Nitro Engine还支持向API端点添加中间件。与API的工作方式类似，Nuxt将读取/server/middleware 目录下的任何文件，为你的项目生成服务器中间件。但与API路由不同的是，这些文件会被映射到自己的路由中，这些文件将在每个请求中被执行。这样做通常是为了让你在所有的响应中添加一个共同的头，记录响应，或者改变一个传入的请求对象。

下面是一个例子，在每个API请求中添加someValue 。

// server/middleware/addValue.js
export default async (req, res) => {
  req.someValue = true
}

Nuxt Bridge

Nuxt 3现在包括Nuxt Bridge，一个前向兼容层，使你能够通过简单的安装和激活Nuxt模块来访问许多新的Nuxt 3功能。

你可以使用Nuxt Bridge来确保你的项目为Nuxt 3做好准备，并确保你的开发人员有尽可能好的体验，而不必进行大规模的重写或冒着破坏性的修改。

虽然我们已经讨论了用Nuxt Bridge进行迁移的方法，但你可以在这里了解更多关于Nuxt Bridge的信息。

NuxtApp

Nuxt Context在Nuxt 3中提供了对运行时应用程序上下文的访问，现在已经改名为NuxtApp。

而在组件和插件中，我们可以通过useNuxtApp 来访问NuxtApp。

import { useNuxtApp } from "#app";

function useMyComposable() {
  const nuxtApp = useNuxtApp();
  // access runtime nuxt app instance
  console.log(nuxtApp);
}

此外，inject 函数，使函数和/或值在你的Nuxt应用程序中可用，现在被称为provide 。

例如，在Nuxt 2中创建一个插件，将提供的名称记录到控制台。

// plugins/hello.js
export default ({ app }, inject) => {
  inject("hello", (name) => console.log(`Hello ${name}!`));
};

// Can be accessed using
this.$hello('Elijah')

在Nuxt 3中，它变成了这样。

const nuxtApp = useNuxtApp()
nuxtApp.provide('hello', (name) => console.log(`Hello ${name}!`))

// Can be accessed using
nuxtApp.$hello('Elijah');

新的文件结构

在Nuxt 3中，pages/ 目录现在是可选的，如果它不在那里，Nuxt将不包括vue-router的依赖。相反，新的app.vue 作为你的Nuxt应用程序的核心组件；你添加到它的一切（JS和CSS）将是全局的，并包含在所有页面上。

这在做单页应用时很有优势，比如登陆页面，或者不需要路由的应用。

可组合目录

Nuxt 3还包括对一个新的composables/ 目录的支持，该目录用于自动导入Vue的组合物到你的应用程序。

如果你还不熟悉Vue中的composables是什么，这是在Vue 3中引入的，你可以在这里了解更多关于composables的信息。

通过Nuxt的可组合目录，我们可以很容易地创建命名和默认的可组合。

例子。

// composables/useFoo.js
import { useState } from '#app'

export const useFoo = () => {
  return useState('foo', () => 'bar')
}

在这种情况下，我们的composable被导出为useFoo ；如果没有提供导出名称，composable将作为文件名的pascalCase ，没有扩展名，可以访问。

它们也是自动导入的，我们可以在任何页面或组件中访问它们。

<template>
  <div>
    {{ foo }}
  </div>
</template>

<script setup>
const foo = useFoo()
</script>

Vue 3和Vite支持

Nuxt 3被设计为与Vue 3一起工作。因为Nuxt 3是在Vue 3中开发的，所以你可以使用一些功能，如Composition API，增强模块导入，以及更好的整体应用速度。Vite支持包含在Nuxt 3中，并且它向后兼容Nuxt 2。

总结

在这篇文章中，我们介绍了Nuxt 3的新功能，以及如何将现有的Nuxt应用转换到这个最新的版本。

你应该记住，Nuxt 3仍然处于测试阶段，所以预计会出现一些问题。我们也建议你在第一个稳定版本之前不要在生产中使用它。

The postWhat's new in Nuxt 3appeared first onLogRocket Blog.

avatar
文章
阅读
粉丝