Lzh on GitHub

Vue.js Development

Nuxt 使用 Vue.js，并添加了组件自动导入、基于文件的路由和用于 SSR 友好的组合式函数等功能。

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

虽然使用 Nuxt 不需要深入了解 Vue，但我们建议您阅读文档并浏览 vuejs.org 上的一些示例。

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

我们选择在 Vue 的基础上构建 Nuxt 的原因如下：

  • Vue 的响应式模型，其中数据的更改会自动触发界面的更改。
  • 基于组件的模板，同时保留 HTML 作为 Web 的通用语言，实现了直观的模式，使您的界面保持一致且功能强大。
  • 从小型项目到大型 Web 应用程序，Vue 在规模上保持良好的性能，以确保您的应用程序持续为用户提供价值。

Nuxt 中的 Vue

单文件组件

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

自动导入

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

Read more in Docs > Guide > Concepts > Auto Imports.

Vue Router

大多数应用程序都需要多个页面以及在它们之间导航的方式。这称为 路由。Nuxt 使用 pages/ 目录和命名约定，使用官方 Vue Router 库 直接创建映射到您的文件的路由。

Read more in Docs > Getting Started > Routing.

与 Nuxt 2 / Vue 2 的区别

Nuxt 3+ 基于 Vue 3。新的主要 Vue 版本引入了一些 Nuxt 利用的更改：

  • 更好的性能
  • 组合式 API
  • TypeScript 支持

更快的渲染

Vue 虚拟 DOM (VDOM) 已从头开始重写，从而实现了更好的渲染性能。最重要的是，当处理编译后的单文件组件时，Vue 编译器可以在构建时通过分离静态和动态标记来进一步优化它们。

这导致更快的首次渲染（组件创建）和更新，以及更少的内存使用。在 Nuxt 3 中，它还实现了更快的服务器端渲染。

更小的 Bundle

通过 Vue 3 和 Nuxt 3，重点放在了减小 bundle 大小上。在版本 3 中，Vue 的大部分功能，包括模板指令和内置组件，都是可进行 tree-shaking 的。如果您不使用它们，您的生产 bundle 将不会包含它们。

通过这种方式，一个最小的 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 的自动导入的响应式 API 重写的上述组件：

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

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

TypeScript 支持

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

阅读关于 Nuxt 中 TypeScript 的详细信息