概述

Nuxt3 是一个基于 Vue 3 的全栈框架，旨在简化 Web 应用程序的开发，支持服务器端渲染 (SSR) 和静态生成等功能。本文将详细介绍 Nuxt3入门的相关内容，包括环境搭建、基础路由设置、数据获取与API调用、常用插件与模块配置、项目部署与优化等。

Nuxt3简介 Nuxt3是什么

Nuxt3 是一个基于 Vue 3 的全栈框架，旨在简化 Web 应用程序的开发。Nuxt3 可以帮助开发者构建服务器端渲染 (SSR) 和静态生成的应用，支持动态路由、内容预取（preload）、按需代码分割（Code Splitting）、状态管理等功能。它通过 Composition API 提供了更多现代化的工具，使开发更具灵活性和可维护性。

Nuxt3与Nuxt2的区别

Nuxt3 是 Nuxt2 的后续版本，主要在以下几个方面有所不同：

1. Vue版本：Nuxt3 使用 Vue 3，而 Nuxt2 使用 Vue 2。这使得 Nuxt3 能够利用 Vue 3 的 Composition API 和其他新特性。
2. 模块升级：Nuxt3 引入了新的模块系统，使得配置和扩展项目变得更加灵活和强大。例如，Nuxt3 的 modules 配置选项能够轻松地添加和配置各种第三方模块。
3. 优化改进：Nuxt3 进行了多项性能优化，包括更好的缓存机制、更快的构建速度和优化的代码分割策略。
4. API改变：虽然大多数核心功能保持不变，但一些 API 和配置选项在 Nuxt3 中有所改动，以更好地适应 Vue 3 的新特性。

Nuxt3的优势

Nuxt3 的主要优势包括：

• 现代化的Vue 3支持：Nuxt3 完全基于 Vue 3，可以充分利用 Vue 3 的 Composition API 和其他新特性。
• 灵活的模块系统：Nuxt3 引入了新的模块系统，可以轻松地添加和配置各种第三方模块。
• 强大的性能优化：Nuxt3 提供了多种性能优化工具和策略，使应用程序运行更加流畅。
• 便捷的开发体验：Nuxt3 提供了简洁的 API 和配置选项，使开发过程更加高效和便捷。

环境搭建 安装Node.js

在开始使用 Nuxt3 之前，你需要确保安装了合适的 Node.js 版本。Nuxt3 支持 Node.js v14.x 和更高版本。可以通过 Node.js 官方网站获取最新版本的 Node.js：

# 使用nvm（Node Version Manager）安装Node.js
# 安装nvm
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.5/install.sh | bash

# 使用nvm安装Node.js
nvm install 16

# 确保正确安装
npm list nvm

创建Nuxt3项目

使用 Nuxt CLI（命令行工具）可以快速创建一个新的 Nuxt3 项目。首先，确保你已经安装了 Nuxt CLI：

npm install -g nuxt@latest

# 确保正确安装
npm list nuxt

创建一个新的 Nuxt3 项目：

npx create-nuxt-app my-nuxt3-app

按照提示完成项目创建过程，包括选择 Vue 版本、安装预设样式库、安装额外的特性等。创建过程完成后，会生成一个新的 Nuxt3 项目文件夹 my-nuxt3-app。

运行项目

进入项目文件夹，启动开发服务器：

cd my-nuxt3-app
npm run dev

打开浏览器，访问 http://localhost:3000，你会看到 Nuxt3 的默认欢迎页面。这意味着你的开发环境已经成功设置好了。

基础路由设置 创建页面组件

Nuxt3 的路由配置是基于文件系统的，每个页面组件都对应一个路由。为了创建一个新的页面组件，只需在 pages 目录下创建一个新的文件夹或文件。例如，在 pages 目录下创建一个 about.vue 文件：

<template>
  <div>
    <h1>About Page</h1>
    <p>This is the about page.</p>
  </div>
</template>

<script setup>
import { definePageMeta } from '#imports'

definePageMeta({
  title: 'About'
})
</script>

路由配置

Nuxt3 中的路由是基于文件路径的，因此不需要手动配置路由。例如，上述 about.vue 文件将映射到 http://localhost:3000/about 路由。

如果你想自定义路由，可以在 nuxt.config.ts 中配置路由：

export default defineNuxtConfig({
  router: {
    routes: [
      { path: '/custom-name', component: '~/pages/about.vue' }
    ]
  }
})

动态路由

Nuxt3 支持动态路由，可以通过在文件名中使用 [slug] 来定义动态部分。例如，在 pages 目录下创建一个新的文件夹 user，并在其中创建一个 index.vue 文件：

<template>
  <div>
    <h1>User Page</h1>
    <p>User ID: {{ $route.params.id }}</p>
  </div>
</template>

<script setup>
import { useRoute } from '#app'

const route = useRoute()
console.log(route.params.id)
</script>

当你访问 http://localhost:3000/user/123 时，route.params.id 将会是 123。

数据获取与API调用 使用Composition API

Nuxt3 使用 Vue 3 的 Composition API，可以更自然地进行数据获取。可以在页面组件中使用 useAsyncData 或 useFetch 抓取数据。例如：

<template>
  <div>
    <h1>Data Page</h1>
    <p>{{ data }}</p>
  </div>
</template>

<script setup>
import { useAsyncData } from '#hooks/useAsyncData'

const { data } = await useAsyncData('data', () => fetch('https://api.example.com/data'))
</script>

钩子函数（asyncData和fetch）

Nuxt 提供了 asyncData 和 fetch 钩子函数来异步获取数据。以下是 asyncData 的使用示例：

<script setup>
import { useAsyncData } from '#hooks/useAsyncData'

const { data } = await useAsyncData('data', () => fetch('https://api.example.com/data'))
</script>

以下是 fetch 的使用示例：

<script>
export default {
  async fetch() {
    const response = await fetch('https://api.example.com/data')
    this.data = await response.json()
  },
  data() {
    return {
      data: null
    }
  }
}
</script>

调用外部API

Nuxt3 支持通过 useFetch 或 useAsyncData 抓取外部 API 的数据。例如，假设你有一个 API 提供的数据，你可以这样调用：

<template>
  <div>
    <h1>Weather Data</h1>
    <p>{{ data }}</p>
  </div>
</template>

<script setup>
import { useAsyncData } from '#hooks/useAsyncData'

const { data } = await useAsyncData('weather', () => fetch('https://api.weatherapi.com/v1/current.json?key=your-api-key&q=London'))
</script>

常用插件与模块 安装和配置Nuxt模块

Nuxt3 提供了丰富的模块生态，可以通过 nuxt.config.ts 文件安装和配置这些模块。例如，安装 nuxt-content 模块：

1. 安装模块：

npm install @nuxt/content

1. 配置模块：

export default defineNuxtConfig({
  modules: [
    '@nuxt/content'
  ]
})

1. 使用模块：

在 content 文件夹中添加内容文件，例如：

---
title: My First Article
---

# My First Article

This is my first article.

在页面中使用内容：

<template>
  <div>
    <h1>{{ article.title }}</h1>
    <nuxt-content :document="article" />
  </div>
</template>

<script setup>
import { useContent } from '#hooks/useContent'

const { article } = await useContent('articles/my-first-article')
</script>

使用插件扩展功能

Nuxt3 支持通过插件扩展功能。例如，安装 nuxt-i18n 插件来支持多语言：

1. 安装插件：

npm install nuxt-i18n

1. 配置插件：

import { defineNuxtConfig } from 'nuxt'

export default defineNuxtConfig({
  modules: [
    'nuxt-i18n'
  ],
  i18n: {
    locales: [
      { code: 'en', iso: 'en-US', file: 'en-US.js' },
      { code: 'zh', iso: 'zh-CN', file: 'zh-CN.js' }
    ],
    defaultLocale: 'zh',
    strategy: 'prefix',
    lazy: true,
    langDir: 'locales/',
    vueI18n: './i18n.js'
  }
})

1. 使用插件：

在页面组件中使用：

<template>
  <div>
    <h1>{{ $t('home.title') }}</h1>
  </div>
</template>

<script setup>
import { useI18n } from '#i18n'

const { t } = useI18n()
</script>

配置SSR（服务器端渲染）

Nuxt3 支持服务器端渲染，可以在 nuxt.config.ts 中配置 SSR 相关参数：

import { defineNuxtConfig } from 'nuxt'

export default defineNuxtConfig({
  ssr: true, // 启用服务器端渲染
  target: 'server', // 指定目标为服务器端
  server: {
    port: 3000, // 服务器端口
    host: '0.0.0.0' // 监听所有网络接口
  }
})

项目部署与优化 构建与部署

构建 Nuxt3 项目可以通过以下命令：

npm run build

构建完成后，项目将输出到 dist 目录。你可以将该目录的内容部署到任何支持静态文件托管的服务器或云服务上：

npm run generate

这将生成一个静态站点，可以部署到 GitHub Pages 或 Netlify。

性能优化

Nuxt3 提供了多种性能优化工具和策略：

1. 按需代码分割：Nuxt3 默认配置了按需代码分割，可以减少初始加载时间。
2. 缓存策略：通过配置缓存策略，如 nuxt.config.ts 中的 dev 和 buildDir 参数，可以优化缓存机制。
3. Lazy Loading：使用 lazy 属性延迟加载某些组件或模块，以减少初始加载时间。
4. 内容预取：使用 preload 和 prefetch 属性预取页面资源，以加快页面加载速度。

常见问题解决

路由错误

问题：页面组件的路由未正确映射。

解决：确保在 pages 目录下正确创建和命名文件或文件夹。每个文件或文件夹将对应一个路由。

数据获取失败

问题：无法从外部 API 获取数据。

解决：检查 API 链接是否正确，确保 API 未限制访问或需要认证。你可以使用浏览器检查工具查看请求的响应。

服务器端渲染问题

问题：服务器端渲染未生效或出现错误。

解决：确保在 nuxt.config.ts 中配置了正确的 ssr: true 参数，并且没有其他配置冲突。你可以查看 dist 目录下的 .nuxt 文件夹，确保生成了服务器端渲染的文件。

静态站点生成问题

问题：生成的静态站点未包含预期的文件。

解决：确保在生成静态站点之前运行了 npm run build 命令，并且配置了正确的输出目录。检查 dist 目录，确保文件正确生成。

通过以上步骤，你可以更好地掌握 Nuxt3 的基本用法和高级功能，构建高效、可维护的 Web 应用程序。