v3.17

Vue.js 开发

Nuxt 使用 Vue.js，并添加了组件自动导入、基于文件的路由和可组合项等功能，以实现服务器端渲染 (SSR) 友好性。

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

¥Nuxt integrates Vue 3, the new major release of Vue that enables new patterns for Nuxt users.

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

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

¥Nuxt has always used Vue as a frontend framework.

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

¥We chose to build Nuxt on top of Vue for these reasons:

  • Vue 的反应式模型，数据更改会自动触发界面更改。
  • 基于组件的模板在保留 HTML 作为 Web 通用语言的同时，支持直观的模式，使你的界面保持一致且功能强大。
  • 完全控制应用的服务器端部分

Vue 与 Nuxt

¥Vue with Nuxt

单文件组件

¥Single File Components

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

¥Vue’s single-file components (SFC or *.vue files) encapsulate the markup (<template>), logic (<script>) and styling (<style>) of a Vue component. Nuxt provides a zero-config experience for SFCs with Hot Module Replacement that offers a seamless developer experience.

自动导入

¥Auto-imports

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

¥Every Vue component created in the components/ directory of a Nuxt project will be available in your project without having to import it. If a component is not used anywhere, your production’s code will not include it.

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

Vue 路由

¥Vue Router

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

¥Most applications need multiple pages and a way to navigate between them. This is called routing. Nuxt uses a pages/ directory and naming conventions to directly create routes mapped to your files using the official Vue Router library.

Read more in Docs > Getting Started > Routing.
Read and edit a live example in Docs > Examples > Features > Auto Imports.

与 Nuxt 2 / Vue 2 的区别

¥Differences with Nuxt 2 / Vue 2

Nuxt 3+ 基于 Vue 3。新的 Vue 主要版本引入了 Nuxt 可以利用的几项更改：

¥Nuxt 3+ is based on Vue 3. The new major Vue version introduces several changes that Nuxt takes advantage of:

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

更快渲染

¥Faster Rendering

Vue 虚拟 DOM (VDOM) 已彻底重写，可提供更佳的渲染性能。此外，在使用已编译的单文件组件时，Vue 编译器可以在构建时通过分离静态和动态标记来进一步优化它们。

¥The Vue Virtual DOM (VDOM) has been rewritten from the ground up and allows for better rendering performance. On top of that, when working with compiled Single-File Components, the Vue compiler can further optimize them at build time by separating static and dynamic markup.

这将加快首次渲染（组件创建）和更新速度，并减少内存使用量。在 Nuxt 3 中，它还可以实现更快的服务器端渲染。

¥This results in faster first rendering (component creation) and updates, and less memory usage. In Nuxt 3, it enables faster server-side rendering as well.

更小的包

¥Smaller Bundle

Vue 3 和 Nuxt 3 都注重于减少包大小。在 Vue 3 版本中，Vue 的大部分功能（包括模板指令和内置组件）都支持 tree-shaking。如果你不使用它们，你的生产包将不会包含它们。

¥With Vue 3 and Nuxt 3, a focus has been put on bundle size reduction. With version 3, most of Vue’s functionality, including template directives and built-in components, is tree-shakable. Your production bundle will not include them if you don’t use them.

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

¥This way, a minimal Vue 3 application can be reduced to 12 kb gzipped.

组合 API

¥Composition API

在 Vue 2 中，向组件提供数据和逻辑的唯一方法是通过 Options API，它允许你将数据和方法返回到具有预定义属性（例如 data 和 methods）的模板：

¥The only way to provide data and logic to components in Vue 2 was through the Options API, which allows you to return data and methods to a template with pre-defined properties like data and methods:

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

Vue 3 中引入的 组合 API 并非 Options API 的替代品，但它能够在整个应用中实现更好的逻辑复用，并且是一种更自然的方式，可以根据复杂组件中的关注点对代码进行分组。

¥The Composition API introduced in Vue 3 is not a replacement of the Options API, but it enables better logic reuse throughout an application, and is a more natural way to group code by concern in complex components.

与 <script> 定义中的 setup 关键字一起使用，这是使用 Composition API 和 Nuxt 3 自动导入的 Reactivity API 重写的上述组件：

¥Used with the setup keyword in the <script> definition, here is the above component rewritten with Composition API and Nuxt 3’s auto-imported Reactivity APIs:

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

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

¥The goal of Nuxt is to provide a great developer experience around the Composition API.

TypeScript 支持

¥TypeScript Support

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

¥Both Vue 3 and Nuxt 3+ are written in TypeScript. A fully typed codebase prevents mistakes and documents APIs usage. This doesn’t mean that you have to write your application in TypeScript to take advantage of it. With Nuxt 3, you can opt-in by renaming your file from .js to .ts , or add <script setup lang="ts"> in a component.

:

Read more in Docs > Guide > Concepts > Typescript.

阅读 Nuxt 中 TypeScript 的详细信息

¥Read the details about TypeScript in Nuxt

::