Vue.js 开发

Nuxt 集成了 Vue 3，这是 Vue 的新一代重大版本，为 Nuxt 用户带来了新的使用模式。

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

我们选择基于 Vue 构建 Nuxt，原因如下：

• Vue 的响应式模型：数据的变化会自动触发界面的更新。
• 基于组件的模板系统，在保留 HTML 作为通用网页语言的同时，提供直观的模式以保持界面一致且功能强大。
• 无论是小型项目还是大型 Web 应用，Vue 都能在规模化时保持良好性能，确保你的应用持续为用户创造价值。

Vue 与 Nuxt

单文件组件

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

自动导入

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

Vue Router

大多数应用需要多个页面以及在它们之间导航的方式。这称为 路由（routing）。Nuxt 使用 app/pages/ 目录和命名约定，利用官方的 Vue Router 库 直接根据你的文件创建路由映射。

与 Nuxt 2 / Vue 2 的差异

Nuxt 3+ 基于 Vue 3。新的主要 Vue 版本带来了若干变化，Nuxt 对这些变化进行了利用：

• 更好的性能
• 组合式 API（Composition API）
• TypeScript 支持

更快的渲染

Vue 的虚拟 DOM（VDOM）已从头重写，从而带来更好的渲染性能。除此之外，在使用已编译的单文件组件时，Vue 编译器可以在构建时进一步优化它们，将静态和动态标记分离。

这带来了更快的首次渲染（组件创建）和更新，以及更少的内存使用。在 Nuxt 3 中，这也使得服务器端渲染更快。

更小的包体积

在 Vue 3 和 Nuxt 3 中，重点放在了减小包体积上。Vue 3 中的大部分功能，包括模板指令和内置组件，都是可进行 tree-shaking 的。如果你不使用它们，生产包将不会包含它们。

因此，一个最小的 Vue 3 应用可以被缩减到 12 kb（gzip 压缩后）。

组合式 API

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

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

Vue 3 中引入的 组合式 API 并不是对 Options API 的替代，而是使得在整个应用中更好地复用逻辑成为可能，并且在复杂组件中按关注点组织代码更为自然。

在 <script> 定义中使用 setup 关键字时，下面是上述组件用组合式 API 和 Nuxt 3 自动导入的响应式 API 重写的示例：

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

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

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

TypeScript 支持

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