Vue.js 开发 Development

Nuxt 使用 Vue 并添加了组件自动导入和基于文件的路由等功能。

Nuxt 使用 Vue 作为前端框架，并添加了组件自动导入和基于文件的路由等功能。 Nuxt 3 集成了 Vue 3，Vue 的新主要版本为 Nuxt 用户启用了新模式。

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

Nuxt 一直使用 Vue 作为前端框架。 出于以下原因，我们选择在 Vue 之上构建 Nuxt：

  • Vue 的反应模型，其中数据的变化会自动触发界面的变化。
  • 基于组件的模板，同时保持 HTML 作为网络的通用语言，支持直观的模式，使您的界面保持一致，但功能强大。
  • 从小型项目到大型 Web 应用程序，Vue 在规模上保持良好表现，以确保您的应用程序不断为用户提供价值。

Vue with Nuxt

单文件组件

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

组件自动导入

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

Vue Router

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

示例

案例演示：stackblitz 中试炼
相关阅读：codesandbox 中试炼

app.vue 文件是入口点，代表浏览器窗口中显示的页面。

在组件的 <template> 中，我们使用在 components/ 目录中创建的 <Welcome> 组件，而无需导入它。

尝试用自定义欢迎消息替换 <template> 的内容。 右侧的浏览器窗口将自动呈现更改而无需重新加载。

💡 如果您熟悉 Vue，您可能正在寻找创建 Vue 应用程序实例的 main.js 文件。 Nuxt 会自动在幕后处理这个问题。

如果您以前是 Nuxt 2 或 Vue 2 的用户，请继续阅读以了解 Vue 2 和 Vue 3 之间的差异，以及 Nuxt 如何整合这些演变。

否则，请转到下一章来发现 Nuxt 的另一个关键特性：渲染模式。

与 Nuxt2/Vue2 的区别

Nuxt 3 基于 Vue 3。新的主要 Vue 版本引入了 Nuxt 利用的几个变化：

  • 更好的性能
  • 组合 API
  • Typescript支持

更快的渲染

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

这导致更快的首次渲染(组件创建)和更新，以及更少的内存使用。 在 Nuxt 3 中，它还支持更快的服务器端渲染。

更小的包

在 Vue 3 和 Nuxt 3 中，重点放在了减少包大小上。 在版本 3 中，Vue 的大部分功能，包括模板指令和内置组件，都是可摇树优化的。 如果您不使用它们，您的生产包将不会包含它们。

这样，最小的 Vue 3 应用程序可以压缩到 12 kb gzip。

Composition API

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

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

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

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

vue
<script setup>
const count = ref(0)
const increment = () => count.value++
</script>

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

  • 使用从 Vue 和 Nuxt 3 内置可组合项。
  • 在 composables/ 目录中编写您自己的自动导入的可重用函数。

TypeScript支持

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

🔎 阅读 Nuxt 3 中有关 TypeScript 的详细信息