Vue.js 开发

Nuxt 集成了 Vue 3，Vue 的新主要版本，为 Nuxt 用户启用了新的模式。

Nuxt 一直使用 Vue 作为前端框架。

我们选择在 Vue 之上构建 Nuxt 的原因如下

• Vue 的响应式模型，其中数据的更改会自动触发界面的更改。
• 基于组件的模板，同时保持 HTML 作为 Web 的通用语言，使直观的模式能够保持界面的一致性，同时又功能强大。
• 从小型项目到大型 Web 应用程序，Vue 始终能保持良好的可伸缩性，以确保您的应用程序持续为用户交付价值。

与 Nuxt 一起使用 Vue

单文件组件

Vue 的单文件组件 (SFC 或 *.vue 文件) 封装了 Vue 组件的标记 (<template>)、逻辑 (<script>) 和样式 (<style>)。Nuxt 为 SFC 提供了零配置体验，并带有 热模块替换，可提供无缝的开发者体验。

自动导入

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

Vue Router

大多数应用程序需要多个页面以及在它们之间导航的方式。这称为路由。Nuxt 使用 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 的大多数功能（包括模板指令和内置组件）都是可摇树优化的。如果未使用它们，则您的生产捆绑包将不会包含它们。

这样，最小的 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 的自动导入的 Reactivity API 重写的上述组件

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

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

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

TypeScript 支持

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