使用 Vue & UI Pro 的仪表板模板

Vue.js 开发

Nuxt 使用 Vue.js 并添加了诸如组件自动导入、基于文件的路由和组合式 API 等功能,以实现对 SSR 友好的使用。

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

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

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

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

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

Vue 与 Nuxt

单文件组件

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

自动导入

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

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

Vue 路由器

大多数应用程序都需要多个页面以及在页面之间导航的方法。这被称为 **路由**。Nuxt 使用 pages/ 目录和命名约定,使用官方的 Vue Router 库 直接创建映射到您文件的路由。

文档 > 入门 > 路由 中了解更多信息。
文档 > 示例 > 功能 > 自动导入 中阅读和编辑实时示例。

与 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 gzip。

组合 API

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

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

Vue 3 中引入的 组合 API 并不是选项 API 的替代品,但它使在整个应用程序中更好地重用逻辑成为可能,并且是按关注点对复杂组件中的代码进行分组的更自然的方式。

<script> 定义中使用 setup 关键字,以下是使用 Composition API 和 Nuxt 3 的自动导入响应式 API 重写的上述组件

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

Nuxt 3 的目标是为 Composition API 提供出色的开发体验。

TypeScript 支持

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

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