Nuxt 3 初探 (上)：Vue 3 生态中的新星

2023-10-02 22:38:08

邂逅 Nuxt 3

Nuxt 3 是一个建立在 Vue 3、Vue Router 和 Vite 之上的全栈框架，为开发者提供了闪电般的速度和无与伦比的开发体验。与传统的 Vue CLI 脚手架不同，Nuxt 3 采用 Vite 作为构建工具，实现了模块热重载、增量构建和代码分割，从而显著提升了开发效率和构建速度。

自动导包

Nuxt 3 的一大亮点是其自动导包功能。得益于对 Vue 3 Composition API 的支持，Nuxt 3 能够自动导入辅助函数和组件，省去了繁琐的显式导入过程。这不仅简化了代码结构，还提高了开发效率，让开发者可以专注于应用程序逻辑的编写。

SEO 友好

在当今互联网环境下，网站的搜索引擎优化至关重要。Nuxt 3 深谙此道，内置了对 SEO 友好的功能，例如自动生成站点地图、支持服务端渲染 (SSR) 和静态生成 (SSG)。通过这些功能，Nuxt 3 应用程序可以获得更佳的搜索引擎排名，从而吸引更多有机流量。

模块化架构

Nuxt 3 采用模块化架构，将应用程序功能划分为独立的模块。这种设计理念带来了诸多好处，例如代码重用、可维护性提升和开发协作简化。开发者可以轻松地添加或移除模块，以满足不同的应用程序需求，从而打造高度可定制的解决方案。

扩展生态系统

Nuxt 3 拥有一个丰富的生态系统，提供了一系列扩展和社区支持。从官方模块到第三方包，开发者可以轻松地为应用程序添加新功能和特性。这使得 Nuxt 3 成为一个高度可扩展的框架，可以满足各种项目需求。

示例应用程序

为了展示 Nuxt 3 的强大功能，我将创建一个简单的示例应用程序。该应用程序将包含一个带有基本 CRUD 功能的博客部分，以及一个使用 Vuex 状态管理的购物车系统。

首先，我将创建一个新的 Nuxt 3 项目：

npx create-nuxt-app my-nuxt-app

然后，我将安装必要的依赖项：

npm install vuex axios

在 store/index.js 文件中，我将创建 Vuex 存储：

import Vuex from 'vuex'

export default new Vuex.Store({
  state: {
    posts: [],
    cart: []
  },
  mutations: {
    // mutations
  },
  actions: {
    // actions
  },
  getters: {
    // getters
  }
})

在 pages/index.vue 文件中，我将创建博客主页：

<template>
  <div>
    <h1>博客</h1>
    <ul>
      <li v-for="post in posts" :key="post.id">
        <a :href="`/posts/${post.id}`">{{ post.title }}</a>
      </li>
    </ul>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'

export default {
  computed: {
    ...mapState(['posts'])
  },
  methods: {
    ...mapActions(['getPosts'])
  },
  created() {
    this.getPosts()
  }
}
</script>

在 pages/posts/_id.vue 文件中，我将创建博客文章详细页面：

<template>
  <div>
    <h1>{{ post.title }}</h1>
    <p>{{ post.content }}</p>
  </div>
</template>

<script>
import { mapState } from 'vuex'

export default {
  computed: {
    ...mapState(['post'])
  },
  created() {
    // 获取文章数据
  }
}
</script>

在 pages/cart.vue 文件中，我将创建购物车页面：

<template>
  <div>
    <h1>购物车</h1>
    <ul>
      <li v-for="item in cart" :key="item.id">
        <span>{{ item.name }}</span>
        <span>{{ item.quantity }}</span>
        <span>{{ item.price }}</span>
      </li>
    </ul>
    <button @click="checkout">结账</button>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'

export default {
  computed: {
    ...mapState(['cart'])
  },
  methods: {
    ...mapActions(['addToCart', 'checkout'])
  }
}
</script>