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 项目的 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 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 API 重写的上述组件

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

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

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

TypeScript 支持

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