Nuxt3 是一个基于 Vue3 的通用应用框架，它提供了开箱即用的功能，例如路由、状态管理、SEO 等，可以帮助你快速构建现代化的 Web 应用。本教程将带你使用 Vite 创建一个 Nuxt3 项目，并探索其一些核心特性。
一、环境准备
- Node.js: 确保已安装 Node.js 16.10.0 或更高版本。
- 代码编辑器: 例如 VS Code。
二、创建项目
- 打开终端，运行以下命令创建一个新的 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 提供了布局系统，可以让你轻松地为不同的页面应用不同的布局。例如：
-
创建一个
My Header My Footerlayouts/default.vue布局文件：
- 在页面组件中使用布局：
<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.com/docs
