Nuxt3 入门教程：构建你的第一个服务端渲染应用

Nuxt3 是一个基于 Vue3 的通用应用框架，它提供了开箱即用的功能，例如路由、状态管理、SEO 等，可以帮助你快速构建现代化的 Web 应用。本教程将带你使用 Vite 创建一个 Nuxt3 项目，并探索其一些核心特性。

一、环境准备

• Node.js: 确保已安装 Node.js 16.10.0 或更高版本。

• 代码编辑器: 例如 VS Code。

二、创建项目

1. 打开终端，运行以下命令创建一个新的 Nuxt3 项目：

   npx nuxi init my-nuxt3-app

2. 选择使用 Vite 作为构建工具：

   ? Select package manager › - Use arrow-keys. Return to submit.
       npm
       yarn
       pnpm
   ? Select UI framework › - Use arrow-keys. Return to submit.
       None
       Tailwind CSS
       UnoCSS
   ? Select features › - Use arrow-keys. Return to submit.
       Linting
       Testing

3. 进入项目目录并安装依赖：

   cd my-nuxt3-app
   npm install

4. 启动开发服务器：

   npm run dev

5. 打开浏览器访问 http://localhost:3000，你将看到 Nuxt3 的欢迎页面。

三、项目结构 

my-nuxt3-app/
├── .nuxt/                  # 构建生成的文件
├── assets/                 # 静态资源，例如图片、字体
├── components/             # Vue 组件
├── composables/            # 可组合函数
├── layouts/                # 布局组件
├── middleware/             # 路由中间件
├── pages/                  # 页面组件，自动生成路由
├── plugins/                # Vue 插件
├── public/                 # 静态文件，例如 favicon.ico
├── server/                 # 服务器端代码
├── app.vue                 # 根组件
├── nuxt.config.ts          # Nuxt 配置文件
├── package.json            # 项目依赖
├── tsconfig.json           # TypeScript 配置文件

四、核心特性

1. 页面路由

Nuxt3 会根据 pages 目录下的文件结构自动生成路由。例如：

• pages/index.vue 对应 / 路由

• pages/about.vue 对应 /about 路由

• pages/users/[id].vue 对应 /users/:id 动态路由

2. 布局系统

Nuxt3 提供了布局系统，可以让你轻松地为不同的页面应用不同的布局。例如：

• 创建一个 layouts/default.vue 布局文件：

  <template>
    <div>
      <header>My Header</header>
      <NuxtPage />
      <footer>My Footer</footer>
    </div>
  </template>

• 在页面组件中使用布局：

  <template>
    <div>
      <h1>About Page</h1>
    </div>
  </template>
  
  <script setup>
  definePageMeta({
    layout: 'default',
  });
  </script>

3. 数据获取

Nuxt3 提供了多种数据获取方式，例如：

• useAsyncData: 用于在页面或组件中异步获取数据。

• useFetch: 用于在 setup 函数中异步获取数据。

• $fetch: 用于在 Vue 实例中异步获取数据。

4. SEO

Nuxt3 提供了开箱即用的 SEO 支持，例如：

• 自动生成 <title> 和 <meta> 标签。

• 支持 SSR (服务器端渲染)，提高 SEO 排名。

五、API 示例

1. 使用 useAsyncData 获取数据

<template>
  <div>
    <h1>Users</h1>
    <ul>
      <li v-for="user in users" :key="user.id">{{ user.name }}</li>
    </ul>
  </div>
</template>

<script setup>
const { data: users } = await useAsyncData('users', () => $fetch('/api/users'));
</script>

2. 使用 definePageMeta 定义页面元信息

<template>
  <div>
    <h1>About Page</h1>
  </div>
</template>

<script setup>
definePageMeta({
  title: 'About Us',
  description: 'This is the about page.',
});
</script>

六、总结

Nuxt3 是一个功能强大且易于使用的框架，它可以帮助你快速构建现代化的 Web 应用。本教程只是介绍了 Nuxt3 的一些基本特性和用法，更多内容请参考官方文档：Nuxt 中文站 - 直观的Web框架 Nuxt3文档 · Nuxt