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

自动导入

在 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 压缩。

组合 API

在 Vue 2 中，为组件提供数据和逻辑的唯一方法是使用选项 API，它允许你将数据和方法返回给模板，使用预定义的属性，如 data 和 methods：

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

Vue 3 中引入的 组合 API 并不是选项 API 的替代品，但它允许在应用程序中更好地复用逻辑，并且是复杂组件中按关注点分组代码的自然方式。

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

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

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

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

TypeScript 支持

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