v3.16
Nuxt on GitHub

Vue.js 开发

Nuxt 使用 Vue.js，并添加了组件自动导入、基于文件的路由和组合式函数等功能，以支持服务端渲染友好的使用方式。

Nuxt 集成了 Vue 3，这是 Vue 的全新主要版本，为 Nuxt 用户带来了新的开发模式。

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

Nuxt 始终以 Vue 作为前端框架。

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

  • Vue 的响应式模型，数据变化会自动触发界面更新。
  • 基于组件的模板化设计，同时保留 HTML 作为 Web 的通用语言，提供了直观且强大的模式来保持界面一致性。
  • 从小型项目到大型 Web 应用，Vue 在扩展时都能保持良好的性能，确保你的应用持续为用户创造价值。

在 Nuxt 中使用 Vue

单文件组件

Vue 的单文件组件（SFC 或 *.vue 文件）将标记（<template>）、逻辑（<script>）和样式（<style>）封装在一个 Vue 组件中。Nuxt 为单文件组件提供了零配置体验，并支持 热模块替换，带来无缝的开发者体验。

自动导入

在 Nuxt 项目中，创建在 components/ 目录中的每个 Vue 组件都可以在项目中直接使用，无需显式导入。如果某个组件未被使用，它将不会包含在生产代码中。

阅读更多 Docs > Guide > Concepts > Auto Imports.

Vue Router

大多数应用需要多个页面以及在页面之间导航的方式，这被称为路由。Nuxt 使用 pages/ 目录和命名约定，通过官方的 Vue Router 库 直接根据文件创建对应的路由。

阅读更多 Docs > Getting Started > Routing.
阅读并编辑实时示例中的内容 Docs > Examples > Features > Auto Imports.

与 Nuxt 2 / Vue 2 的差异

Nuxt 3+ 基于 Vue 3。Vue 的新主要版本引入了多项变化，Nuxt 充分利用了这些变化：

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

更快的渲染

Vue 的虚拟 DOM（VDOM）从头重写，提供了更好的渲染性能。此外，在处理编译后的单文件组件时，Vue 编译器可以在构建时通过分离静态和动态标记进一步优化。

这带来了更快的首次渲染（组件创建）和更新，以及更低的内存使用量。在 Nuxt 3 中，这也使服务端渲染变得更快。

更小的打包体积

在 Vue 3 和 Nuxt 3 中，重点优化了打包体积。在版本 3 中，Vue 的大多数功能，包括模板指令和内置组件，都是可树摇（tree-shakable）的。如果未使用这些功能，它们将不会包含在生产打包中。

因此，一个最小的 Vue 3 应用可以压缩到 12 kb（gzipped）。

组合式 API

在 Vue 2 中，唯一为组件提供数据和逻辑的方式是通过选项 API，允许通过预定义的属性（如 data 和 methods）向模板返回数据和方法：

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

Vue 3 引入的 组合式 API 并非选项 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 的详细信息