Nuxt 集成了 Vue 3，这是 Vue 的新主要版本，为 Nuxt 用户启用了新的模式。

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

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

• Vue 的响应式模型，数据的变化会自动触发界面的变化。
• 基于组件的模板化，同时保持 HTML 作为网络的通用语言，使得保持界面一致且强大的直观模式成为可能。
• 从小型项目到大型 Web 应用，Vue 在规模上保持良好性能，确保您的应用持续为用户提供价值。

Vue 与 Nuxt

单文件组件

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

自动导入

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

Vue 路由

大多数应用需要多个页面以及在它们之间导航的方法。这称为路由。Nuxt 使用 pages/ 目录和命名约定，通过官方 Vue Router 库 直接创建映射到文件的路由。

与 Nuxt 2 / Vue 2 的区别

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

• 更好的性能
• Composition API
• TypeScript 支持

更快的渲染

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

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

更小的包

在 Vue 3 和 Nuxt 3 中，重点放在减少包大小上。在版本 3 中，Vue 的大部分功能，包括模板指令和内置组件，都是可摇树的。如果您不使用它们，生产包中将不包含它们。

这样，一个最小的 Vue 3 应用可以缩减到 12 kb 的 gzip 大小。

Composition API

在 Vue 2 中，提供数据和逻辑给组件的唯一方法是通过 Options API，它允许您使用预定义的属性如 data 和 methods 将数据和方法返回给模板：

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

Vue 3 引入的 Composition API 不是 Options API 的替代品，但它在整个应用中启用了更好的逻辑重用，并且在复杂组件中是一种更自然的按关注点分组代码的方法。

在 <script> 定义中使用 setup 关键字，这里是使用 Composition API 和 Nuxt 3 的自动导入响应式 API 重写的上述组件：

const count = ref(0)
const increment = () => count.value++

Nuxt 的目标是围绕 Composition API 提供出色的开发者体验。

• 使用 Vue 和 Nuxt 内置可组合 的自动导入 响应式函数。
• 在 composables/ 目录 中编写您自己的自动导入可重用函数。

TypeScript 支持

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