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 通过热模块替换（Hot Module Replacement）为 SFC 提供了零配置体验，从而提供了无缝的开发体验。

自动导入

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

Vue Router

大多数应用程序需要多个页面以及在它们之间导航的方式。这称为 路由。Nuxt 使用 app/pages/ 目录和命名约定，使用官方的Vue Router 库.

与 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-shaking 的。如果您不使用它们，您的生产包将不会包含它们。

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

组合式 API

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

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

用于格式化的组合式 API在 Vue 3 中引入的 API 并不是选项 API 的替代品，但它能够更好地在整个应用程序中重用逻辑，并且是更自然地在复杂组件中按关注点对代码进行分组的方式。

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

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

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

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

TypeScript 支持

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