Vue.js 开发

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

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

虽然使用 Nuxt 不需要深入了解 Vue，但我们建议您阅读文档并查看vuejs.org.

上的一些示例。Nuxt 始终将 Vue 作为前端框架。

我们选择在 Vue 之上构建 Nuxt 是出于以下原因：

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

Vue 与 Nuxt

单文件组件

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

自动导入

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

在文档 > 4 X > 指南 > 概念 > 自动导入中了解更多信息。

Vue Router

大多数应用程序都需要多个页面以及在它们之间导航的方式。这称为 路由。Nuxt 使用 app/pages/ 目录和命名约定，使用官方的Vue Router 库.

直接创建映射到您的文件的路由。在 文档 > 4.X > 入门 > 路由 中阅读更多内容。
在 文档 > 4.X > 示例 > 功能 > 自动导入 中阅读并编辑实时示例。

与 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（gzipped 压缩后）。

组合式 API

在 Vue 2 中，向组件提供数据和逻辑的唯一方法是通过选项 API，它允许您使用 data 和 methods 等预定义属性将数据和方法返回到模板中。

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

用于格式化的组合式 API在 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 的详细信息