Nuxt 3测试版的新功能与改进之处

热门技术勘探工
368 阅读9分钟

在这篇文章中，我们将探讨Nuxt 3提供的最显著的新功能和改进，我们还将看看它们中的大多数如何在实践中使用。这将提供一个很好的概述，说明Nuxt 3可以实现什么，以及你如何在你的项目中实现它的优点。

关于Nuxt的概述

Nuxt是一个建立在Vue之上的高层次、开源的应用开发框架。它的目的是加速、简化和促进基于Vue的应用程序的开发。

它通过提供以下内容来实现这一目标。

  • 大多数最好的网络性能优化都是开箱即用的。
  • 自动化的应用支架和开发。Nuxt以优化和微调的启动项目的形式，结合并整合了一套精心策划的最佳工具。
  • 一套有主见的目录结构约定，可以更容易和有效地管理页面和组件。

所有这些好东西使得Nuxt已经成为构建Vue应用程序的完美选择。但好消息是，经过长时间的延迟，Nuxt 3测试版已于2021年10月公布。这个完全重新架构的版本承诺会更快、更轻、更灵活、更强大，提供顶级的DX（开发者体验）。Nuxt现在比以前更好了，它带来了一些真正令人印象深刻的功能。让我们来看看它们是什么。

Nuxt 3测试版的新特性

Nuxt 3测试版带来了很多改进和令人兴奋的新功能。让我们来探索其中最显著的特点。

Nitro是在h3基础上为Nuxt建立的一个新的服务器引擎。它提供了以下好处。

  • 支持API路线。你的服务器API和中间件分别通过读取server/api/ 和server/middleware/ 目录中的文件自动生成。你只需将相应的文件放在server/api/ 目录中，就可以创建所需的API端点。例如，一个tasks.js 文件将生成一个http://yourwebsite.com/api/tasks 端点。server/middleware/ 中的函数会自动加载并在每个请求中运行--这与Express的工作方式很相似。
  • 应用程序可以被部署到各种无服务器平台，如Vercel、Netlify、AWS、Azure等。另外，一些平台（Vercel、Netlify）在部署时被自动检测到，无需添加自定义配置。
  • 构建的应用程序可以部署在任何支持JavaScript的系统上，包括Node、Deno、Serverless、Workers等。
  • 增量静态生成。这允许使用静态加无服务器网站的混合模式。最终结果是SSR（服务器端渲染）和SSG（静态网站生成）的混合。(这是一个计划中的功能，但目前还没有实现）。
  • 更轻的应用程序输出。构建的应用程序被放到一个通用的.output/ 目录中。构建的程序被最小化，任何Node模块（除了polyfills）被移除。这个策略以现代浏览器为目标，在客户端和服务器上都能产生小75倍的包。
  • 通过动态服务器代码拆分和异步加载块来优化冷启动。
  • 更快的捆绑和热重载。

Nuxi是一个新的Nuxt CLI。它提供了一个零依赖性的体验，方便新项目的脚手架和模块集成。

Nuxt Kit提供了一个新的灵活的模块开发体验，支持TypeScript和跨版本兼容性。

Nuxt Bridge允许你在现有的Nuxt 2项目中使用Nuxt 3的一些功能。它的目的是通过向Nuxt 2用户提供增量更新/升级他们的项目的能力，使未来的迁移更加顺畅。以下是Nuxt 3的功能，你可以在你的Nuxt 2项目中包含这些功能，正如Nuxt网站上所说的那样。

  • 在Nuxt 2中使用Nitro服务器
  • 在Nuxt 2中使用组合API（与Nuxt 3相同）。
  • 在Nuxt 2中使用新的CLI和devtools
  • 逐步升级到Nuxt 3
  • 与Nuxt 2模块生态系统兼容
  • 逐块升级（Nitro、Composition API、Nuxt Kit）。

Nuxt Bridge也旨在促进整个Nuxt生态系统的升级。出于这个原因，传统的插件和模块将继续工作，Nuxt 2的配置文件将与Nuxt 3兼容，一些Nuxt 3的API（如Pages）将保持不变。

这些都是所谓的 "大 "功能，但Nuxt 3还有很多小功能和改进。我们将在下面的列表中探讨它们。

  • 支持Vue 3。Nuxt 3版本与Vue 3保持一致，所以你可以利用Vue 3的所有伟大功能，如Composition API、composables等。Nuxt已经以内置的可合成物的形式提供了一些功能，如useFetch(),useState(), 和useMeta() 。关于Vue 3 Composition API的更多信息，请看如何用Vue 3 Composition API创建可重用的组件。
  • 支持Webpack 5和Vite。享受最好的捆绑器的最新版本，提供更快的构建时间和更小的捆绑尺寸，不需要配置。Vite，正如它的名字一样，提供了超快的HMR（热模块替换）。
  • 支持TypeScript，具有类型检查，更好的自动完成和错误检测，以及自动生成的类型。如果你不喜欢或不需要TypeScript，你仍然可以使用Nuxt而不需要它。
  • 本地ESM支持。
  • 暂停支持它允许你在任何组件中获取数据，在导航之前或之后。
  • 全局实用程序和可组合函数的自动导入。在<script setup> 或setup() 函数里面，你可以使用Nuxt 3提供的任何可组合的函数，如useFetch(),useState(),useMeta(), 还有Vue的反应性函数，如ref(),reactive(),computed(), 等等。在新的composables/ 目录中，你可以在组合函数中定义你的所有功能，这些函数也是自动导入的。即使是来自VueUse库的组合函数，在经过小规模配置后也是如此。
  • 可选的页面支持。Vue Router 4只在你创建了一个pages/ 目录时使用。如果你不使用页面，这可以产生更轻的构建。
  • Nuxt Devtools，它可以在浏览器中提供无缝集成的调试工具。(这是一个计划中的功能，但它还没有实现）。

好了，现在我们已经看到了Nuxt在其最新的实现中是多么的伟大，让我们看看我们如何在行动中使用它的超级力量。

在下面的章节中，我们将探讨如何开始使用Nuxt 3，以及如何使用它来实现一些最小的博客功能。特别是，我们将研究以下内容。

  • 创建一个新的Nuxt 3项目
  • 在项目中添加Tailwind CSS支持
  • 创建和使用自定义布局
  • 创建博客页面
  • 创建和使用自定义组件
  • 使用Nuxt 3的内置组件
  • 创建和使用自定义组件

开始使用Nuxt 3

注意：在我们开始之前，请确保你的机器上安装了Nodev14或v16。

我们将从创建一个新的Nuxt 3项目开始。要做到这一点，请在终端运行以下命令。

npx nuxi init nuxt3-blog

这将为你建立一个没有安装任何依赖项的新项目，所以你需要运行以下命令来导航到该项目并安装依赖项。

cd nuxt3-blog
npm install

最后，为了启动开发服务器，运行这个命令。

npm run dev

在你的浏览器中打开http://localhost:3000。如果一切按预期进行，你应该看到下面的欢迎页面。

Nuxt starter project home page

如果你熟悉Nuxt 2，你可能会注意到Nuxt 3中的项目结构被简化了一些。

Project folder structure

下面是一个简短的列表，探索Nuxt 3与Nuxt 2相比在项目结构上最显著的变化。 在Nuxt 3中。

  • 增加了一个app.vue 文件。它是你应用程序中的主要组件。无论你在里面放了什么（CSS、JS等），都将是全局可用的，并包含在每个页面中。
  • pages/ 目录的使用是可选的。你可以只用app.vue 作为主组件来构建你的应用程序，而将其他组件放在components/ 目录中。如果是这样的话，vue-router就不会被使用，应用程序的构建将变得更加轻巧。
  • 一个新的composables/ 目录被添加。在这里添加的每一个可组合程序都是自动导入的，所以你可以在你的应用程序中直接使用它。
  • 添加了一个新的.output/ 目录，正如我们之前提到的，产生更小的包。

用Nuxt 3建立一个最小的博客

注意：你可以在Nuxt 3 Blog Example repo中探索这个项目的完整源代码。

在本节中，我们将通过建立一个超级简约的博客来探索Nuxt 3的基础知识。我们将需要一些样式，而Tailwind CSS是一个很好的选择。

在项目中包括Tailwind CSS

要安装Tailwind和它的同行依赖，请运行以下程序。

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

现在我们需要生成Tailwind和PostCSS配置文件。运行下面的程序。

npx tailwindcss init -p

这将在根目录下生成tailwind.config.js 和postcss.config.js 文件。打开第一个文件，配置content 选项，以包括你项目中所有包含Tailwind实用类的文件。

// tailwind.config.js
module.exports = {
  content: [
    "./components/**/*.{vue,js,ts}",
    "./layouts/**/*.vue",
    "./pages/**/*.vue",
    "./plugins/**/*.{js,ts}",
    "./app.vue",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

注意：从第三版开始，Tailwind不再使用PurgeCSS，purge 选项已被改名为content 。请阅读Tailwind文档中的内容配置部分，了解更多关于content 选项的信息。

postcss.config.js 文件不需要任何配置。它已经包含了Tailwind和Autoprefixer作为插件。

// postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

下一步是添加Tailwind的样式。创建一个新的assets 目录，并在其中放置一个css 文件夹。在assets/css/ 目录中，创建一个styles.css 文件，并将以下内容放入其中。

/* assets/css/styles.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

最后一步是用以下内容更新nuxt.config.ts 。

// nuxt.config.ts
import { defineNuxtConfig } from 'nuxt3'

// https://v3.nuxtjs.org/docs/directory-structure/nuxt.config
export default defineNuxtConfig({
  css: ["@/assets/css/styles.css"],
  build: {
    postcss: {
      postcssOptions: require("./postcss.config.js"),
    },
  },
})

现在我们可以在我们的项目中使用Tailwind的所有实用程序。

继续阅读Nuxt 3 Beta。在SitePoint上有什么新东西和如何开始。

avatar
文章
阅读
粉丝