v3.16
GitHub

Vue.js 开发

Nuxt 使用 Vue.js 并添加了诸如组件自动导入、基于文件的路由和适合 SSR 的组合功能等特性。

Nuxt 集成了 Vue 3，这是 Vue 的新主要版本，使 Nuxt 用户能够采用新的模式。

虽然使用 Nuxt 并不要求深入了解 Vue，但我们建议您阅读文档并浏览 vuejs.org 上的一些示例。

Nuxt 一直以来都将 Vue 作为前端框架。

我们选择在 Vue 之上构建 Nuxt 的原因如下：

  • Vue 的响应式模型，其中数据的变化会自动触发界面的变化。
  • 基于组件的模板，同时保持 HTML 作为网络的共同语言，能够启用直观的模式，以保持您的界面一致而强大。
  • 从小型项目到大型 Web 应用程序，Vue 在规模上持续良好表现，以确保您的应用程序持续为用户提供价值。

与 Nuxt 的 Vue

单文件组件

Vue 的单文件组件（SFC 或 *.vue 文件）封装了 Vue 组件的标记（<template>）、逻辑（<script>）和样式（<style>）。Nuxt 为 SFC 提供了零配置的体验，并支持 热模块替换，为开发者提供无缝的体验。

自动导入

在 Nuxt 项目的 components/ 目录中创建的每个 Vue 组件都将可用于您的项目，无需手动导入。如果某个组件未在任何地方使用，则生产环境中的代码将不会包含它。

Read more in Docs > Guide > Concepts > Auto Imports.

Vue Router

大多数应用程序需要多个页面及其之间的导航方式。这称为 路由。Nuxt 使用 pages/ 目录和命名约定，直接创建与您的文件映射的路由，使用官方的 Vue Router 库。

Read more in Docs > Getting Started > Routing.
Read and edit a live example in Docs > Examples > Features > Auto Imports.

与 Nuxt 2 / Vue 2 的区别

Nuxt 3+ 基于 Vue 3。新主要版本的 Vue 引入了几个 Nuxt 利用的变化：

  • 更好的性能
  • 组合 API
  • TypeScript 支持

更快的渲染

Vue 虚拟 DOM（VDOM）从头重写，实现了更好的渲染性能。此外，在处理编译的单文件组件时，Vue 编译器可以在构建时进一步优化它们，通过将静态和动态标记分开。

这导致了更快的首次渲染（组件创建）和更新，以及更少的内存使用。在 Nuxt 3 中，它还实现了更快的服务器端渲染。

更小的包体

通过 Vue 3 和 Nuxt 3，重点放在了包体大小的减少上。在版本 3 中，Vue 的大部分功能，包括模板指令和内置组件，都可以进行树摇（tree-shakable）。如果不使用它们，您的生产包将不会包含它们。

这样，最小的 Vue 3 应用程序可以减少到 12kb gzip 压缩。

组合 API

在 Vue 2 中，提供数据和逻辑给组件的唯一方式是通过选项 API，使您可以将数据和方法返回到具有预定义属性（如 data 和 methods）的模板中：

<script>
export default {
  data() {
    return {
      count: 0
    }
  },
  methods: {
    increment(){
      this.count++
    }
  }
}
</script>

在 Vue 3 中引入的 组合 API 不是对选项 API 的替代，而是使得在整个应用中更好地重用逻辑，并在复杂组件中以更加自然的方式按关注点对代码进行分组。

结合 setup 关键字在 <script> 定义中，以下是使用组合 API 以及 Nuxt 3 自动导入的响应性 API 重写的组件：

components/Counter.vue
<script setup lang="ts">
const count = ref(0)
const increment = () => count.value++
</script>

Nuxt 的目标是围绕组合 API 提供良好的开发者体验。

TypeScript 支持

Vue 3 和 Nuxt 3+ 均使用 TypeScript 编写。完全类型化的代码库可以防止错误并记录 API 的使用。这并不意味着您必须使用 TypeScript 编写应用程序才能利用它。使用 Nuxt 3，您可以通过将文件名从 .js 更改为 .ts 或在组件中添加 <script setup lang="ts"> 来选择性地启用它。

阅读有关 Nuxt 中 TypeScript 的详细信息