Vue.js 开发

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

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

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

• Vue 的响应式模型，在数据发生变化时自动触发界面变化。
• 基于组件的模板，同时保持 HTML 作为 Web 的通用语言，使界面保持一致而强大的直观模式。
• 从小型项目到大型 Web 应用程序，Vue 在规模上一直表现出色，确保你的应用程序持续为用户提供价值。

Vue 与 Nuxt

单文件组件

Vue 的单文件组件（SFC 或 *.vue 文件）将 Vue 组件的标记（<template>）、逻辑（<script>）和样式（<style>）封装在一起。Nuxt 提供了零配置的 SFC 体验，并使用 Hot Module Replacement 实现了无缝的开发者体验。

自动导入

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

Vue Router

大多数应用程序需要多个页面以及在它们之间导航的方式。这被称为路由。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 功能都可以进行 tree-shaking。如果你不使用它们，你的生产捆包将不包含它们。

这样，一个最小的 Vue 3 应用程序可以减小到 12 KB gzipped。

Composition API

在 Vue 2 中，向组件提供数据和逻辑的唯一方式是通过 Options API，它允许你返回数据和方法到一个带有预定义属性（如 data 和 methods）的模板中：

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

Vue 3 中引入的 Composition API 不是 Options API 的替代，而是可以更好地在整个应用程序中重用逻辑，并且是在复杂组件中按关注点分组的更自然的方式。

使用 <script> 定义中的 setup 关键字，下面是使用 Composition API 和 Nuxt 3 自动导入的 Reactivity APIs 重写的上面的组件：

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

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

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

TypeScript 支持

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