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 提供了零配置体验，并带有热模块替换，带来无缝的开发体验。

自动导入

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

Vue Router

大多数应用都需要多个页面，以及在这些页面间导航的方式。这被称为路由。Nuxt 使用 app/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（gzip 后）。

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 自动导入的响应式 API 重写的上述组件：

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

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

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

TypeScript 支持

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