Nuxt 3 入门指南：项目创建与路由详解

2023-11-26 03:00:50

Nuxt 3 的新时代

Nuxt 3 是一款旨在简化 Web 开发的强大开源框架。经过架构重组，它的核心变得更小、性能更佳，为开发者提供了前所未有的便利。本文将带你踏上 Nuxt 3 的探索之旅，从项目创建到路由基础，一步步深入了解这个令人兴奋的框架。

项目创建

Nuxt 3 的项目创建过程异常简单。你可以通过以下命令轻松启动一个新的项目：

npx nuxi init my-nuxt3-project

这个命令将创建一个新的 Nuxt 3 项目目录，其中包含所有必要的依赖项和文件。

路由基础

Nuxt 3 的路由系统提供了极大的灵活性。它支持多种路由模式，包括：

客户端路由 (CSR) ：在浏览器中动态加载页面。
服务端渲染 (SSR) ：在服务器上预先渲染页面，然后发送给浏览器。
静态站点生成 (SSG) ：预先构建并部署静态页面。

Nuxt 3 使用 Vue Router 作为其路由引擎，提供了一组强大的特性：

嵌套路由 ：允许你创建嵌套的路由层次结构。
动态路由 ：基于参数匹配 URL 路径。
中间件 ：在路由处理之前或之后执行代码。
布局：定义页面共享的通用布局。

实例：创建一个简单的博客应用

为了更好地理解 Nuxt 3 的路由系统，让我们创建一个简单的博客应用。首先，在 pages 目录中创建一个新的文件 post.vue：

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

<script>
export default {
  data() {
    return {
      post: {
        title: '欢迎来到我的博客！',
        content: '这是我的第一篇博客文章。'
      }
    }
  }
}
</script>

接下来，在 pages/index.vue 中定义路由：

<template>
  <div>
    <h1>博客文章列表</h1>
    <ul>
      <li v-for="post in posts" :key="post.id">
        <nuxt-link :to="`/post/${post.id}`">{{ post.title }}</nuxt-link>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      posts: [
        { id: 1, title: '文章 1' },
        { id: 2, title: '文章 2' },
        { id: 3, title: '文章 3' }
      ]
    }
  }
}
</script>