第 3 章：项目初始化与第一个 Hello World 页面

约 2913 字大约 10 分钟

2025-11-13

终于来到众目睽睽的项目初始化的环节了，我们将会在这一章完成项目的初始化，然后构建你全栈项目中的第一个 Hello World！

3.2 构建你的第一个 Hello World！

3.2.1.1 写入前端 Hello World 页面

在 frontend/app/pages 目录下创建一个名为 index.vue 的文件，并在其中添加以下内容：

<template>
  <div class="container">
    <h1 class="title">Hello, World!</h1>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
}
</script>

<style scoped>
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

h1 {
  font-size: 5rem;
  /* 设置背景渐变 */
  background-image: linear-gradient(45deg, #BC95C6, #7DC4CC);
  /* 将背景裁剪到文本 */
  -webkit-background-clip: text;
  background-clip: text;
  /* 设置文本填充为透明，显示背景渐变 */
  -webkit-text-fill-color: transparent;
}
</style>

将 frontend/app/app.vue 文件中的内容替换为以下代码：

<template>
  <div>
    <NuxtRouteAnnouncer />
    <NuxtLayout>
      <NuxtPage />
    </NuxtLayout>
  </div>
</template>

3.2.1.2 访问页面

启动 Nuxt 开发服务器：

pnpm run dev -- -o

3.2.1.3 查看结果

在浏览器中访问 http://localhost:3000，你应该能看到一个居中显示的 "Hello, World!" 标题，标题的字体颜色是一个渐变的紫色到蓝色。

如图所示：

3.2.2 完成后端 Hello World 接口

3.2.2.1 创建后端 API

在 backend/src/backend/__init__.py 文件中添加以下内容：

from fastapi import FastAPI

app = FastAPI()

@app.get("/")
async def root():
    return {"message": "Hello World!"}

3.2.2.2 启动后端服务

在 backend 目录下打开终端，运行以下命令启动后端服务：

pdm run uvicorn src.backend:app --reload

3.2.2.3 访问后端 API

在浏览器中访问 http://localhost:8000，你应该能看到一个 JSON 响应，内容为 {"message": "Hello World!"}。

如图所示：

FastAPI docs 页面

在浏览器中访问 http://localhost:8000/docs，你应该能看到 FastAPI 自动生成的 API 文档页面。这个页面可以让你查看和测试你的 API 接口。

FastAPI 实际上提供了两种风格的自动文档页面！除了 /docs（基于 Swagger UI）外，你还可以访问 /redoc 获取基于 ReDoc 的替代文档界面。文档页面会根据你在代码中定义的 Pydantic 模型和类型注解，自动生成请求和响应的数据结构说明，甚至包含字段验证规则。在文档页面中，你可以直接填写表单或 JSON 数据，然后点击 "Try it out" 按钮立即测试你的 API，无需使用 Postman 等额外工具。

完成教程，展示你魔改后的 Hello World！

上面的前端页面和后端 API 都完成了，现在你可以在浏览器中访问 http://localhost:3000，应该能看到一个居中显示的 "Hello, World!" 标题，标题的字体颜色是一个渐变的紫色到蓝色。同时，在浏览器中访问 http://localhost:8000，应该能看到一个 JSON 响应，内容为 {"message": "Hello World!"}。请你修改这两个页面，让它们在展示 "Hello, World!" 的同时，也展示你的名字。

3.3 小结

在本章中，我们完成了前端和后端的初始化工作，并创建了一个简单的 "Hello World!" 页面和 API。通过这个简单的例子，我们了解了如何使用 Nuxt 3 和 FastAPI 快速搭建一个前后端分离的项目，并展示了如何使用 Nuxt 3 的页面和组件，以及如何使用 FastAPI 创建 API 接口。

好像有什么问题？

你也许注意到了，到目前为止，长得好看的似乎都是前端干的！后端似乎什么都没做，只是提供了一个简单的 API 接口，而且这个接口也没有什么用。

没错！你的想法是对的！

在互联网发展初期，前端与后端的界限并不清晰。前端主要负责用户界面展示和交互处理，后端则专注于业务逻辑计算、数据库管理和服务器端操作。两者通常共存于同一项目中，共享代码库和资源文件。

随着 Web 应用复杂度的不断提升，前后端分离架构逐渐成为行业主流。这种架构模式带来了多方面的优势：

关注点更聚焦：前端团队可以全力优化用户体验和界面设计，后端团队则专注于提升业务逻辑的健壮性和数据处理效率
技术选型更灵活：前后端可以根据各自需求选择最适合的技术栈，不必受限于单一技术体系
团队协作更高效：通过 API 接口作为契约，前后端团队可以并行开发，大幅提升项目迭代速度
性能优化更精准：前端可利用静态资源缓存、CDN 分发等技术提升加载速度，后端则可专注于业务逻辑和数据库查询的性能调优

需要强调的是，这绝不意味着后端的重要性降低。在实际项目中，后端承担着至关重要的职责：复杂业务逻辑的实现、海量数据的高效处理、用户身份认证与授权、API 接口的安全性保障等核心功能都依赖于强大的后端支持。前端精美的界面只有在后端提供稳定可靠的数据服务和业务能力的基础上，才能真正为用户创造价值。

在后续章节中，我们将深入探讨前后端协同工作的最佳实践，学习如何构建一个功能完整的全栈应用。你将了解后端如何实现数据持久化、用户认证授权、API 安全防护等关键功能，以及前端如何高效地与后端进行数据交互，共同打造出既美观又实用的 Web 应用。

第 3 章：项目初始化与第一个 Hello World 页面

3.1 项目初始化

3.1.1 在 VSCode 中配置项目

3.1.1.1 新建项目目录

3.1.1.2 打开项目目录

3.1.1 前端项目初始化（Nuxt）

3.1.1.2 推荐的前端项目结构

3.1.2 后端项目初始化（FastAPI）

3.1.2.1 创建项目目录并初始化

3.1.2.2 安装项目依赖

3.1.2.3 推荐的后端项目结构