v3
GitHub

Vue.js 开发

Nuxt 使用 Vue.js 并增加了组件自动导入、基于文件的路由和组合式函数等特性，以实现对 SSR 友好的使用。

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

使用 Nuxt 并不要求深入掌握 Vue，但我们建议您阅读官方文档并浏览 vuejs.org 上的一些示例。

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

我们选择基于 Vue 构建 Nuxt，原因包括：

  • Vue 的响应性模型，当数据发生变化时，界面会自动更新。
  • 基于组件的模板保持了 HTML 作为网络通用语言，同时提供了直观的模式，能够保持界面的一致性且功能强大。
  • 从小型项目到大型网页应用，Vue 在规模扩大时仍保持良好性能，确保您的应用能够持续为用户创造价值。

Nuxt 中的 Vue

单文件组件

Vue 的单文件组件（SFC 或 *.vue 文件）封装了 Vue 组件的标记（<template>）、逻辑（<script>）和样式（<style>）。Nuxt 为单文件组件提供了零配置体验，配合热模块替换，带来顺畅的开发体验。

自动导入

在 Nuxt 项目的 components/ 目录下创建的每个 Vue 组件将会自动在项目中可用，无需显式导入。如果某个组件未被任何地方使用，生产环境代码中将不会包含该组件。

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

Vue Router

大多数应用需要多个页面和页面间的导航，这被称为路由。Nuxt 使用 pages/ 目录和命名约定，借助官方的 Vue Router 库 直接映射文件来创建路由。

Read more in Docs > Getting Started > Routing.
Read and edit a live example in 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 中，重点放在了减少包体积。Vue 3 中大部分功能，包括模板指令和内置组件都是可树摇的。如果您未使用它们，它们不会被包含到生产包中。

这样，一个最小的 Vue 3 应用可以缩减到 12 kb gzip 压缩大小。

组合式 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"> 即可选择性启用。

阅读 Nuxt 中关于 TypeScript 的详细介绍