企业官网建设流程全解析

📌 本章目标：了解这个项目是做什么的，把开发环境跑起来

⭐ 难度：入门 | ⏱️ 预计时间：30 分钟

1.1 项目是做什么的？

用一句话说清楚

我们要做的是一个AI Agent 工作台——用户可以在一个界面里管理自己的 AI 助手，跟它们聊天，看它们干活，还能审批它们的操作。

举个例子你就懂了

想象一下你是一个运维工程师，你有一个叫「小运」的 AI 助手：

👨‍💻 你：帮我看看生产服务器的 CPU 使用率高不高 💬 小运：好的，我来查一下... 🔧 小运正在执行命令：top-bn1|grepCpu ✅ 小运：CPU 使用率是35%，一切正常

这个工作台就是干这个的：

• 左边是你的 AI 助手列表
• 中间是聊天窗口
• 右边是 AI 正在做什么的详细过程
• 遇到危险操作还会弹出来让你审批

核心功能清单

1.2 技术栈一览

别被下面的列表吓到！我们会一章一章学，每一个都讲明白。

前端框架

状态管理

💡小贴士：如果你只学过 Redux，MobX 会让你感觉「啊？这么简单？」。它的核心理念是：你改数据，UI 自动更新，不用写 reducer、action 那些样板代码。

UI 组件库

其他重要的库

1.3 环境搭建

前置工具

在开始之前，请确保你的电脑上装了这些：

⚠️注意：Node.js 版本不要太低，建议 18 或更高。怎么安装？直接去 Node.js 官网 下载 LTS 版本，一路下一步就行。

新建项目

让我们从零开始创建一个 Vite + React + TypeScript 项目：

# 用 npm 创建项目npmcreate vite@latest ai-agent-workbench ----templatereact-ts# 或者用 yarnyarncreate vite ai-agent-workbench--templatereact-ts

执行完之后，进入项目目录，安装依赖：

cdai-agent-workbenchnpminstall# 或者yarn

启动项目

npmrun dev# 或者yarndev

如果一切顺利，你会看到类似这样的输出：

VITE v7.x.x readyinxxx ms ➜ Local: http://localhost:5173/ ➜ Network: use--hostto expose

打开浏览器访问http://localhost:5173/，你就能看到 Vite 的默认欢迎页面了。

🎉恭喜！你的第一个项目跑起来了！

1.4 项目目录结构长什么样？

先来看一下我们最终项目的目录结构，心里有个谱：

ai-agent-workbench/ ├── public/# 静态资源（图片、字体等）├── src/ │ ├── app.tsx# 应用入口（路由配置）│ ├── main.tsx# React 渲染入口│ ├── styles/# 全局样式│ │ ├── variables.less# 全局样式变量│ │ └── mixins.less# 样式 mixin│ ├── utils/# 通用工具函数│ ├── components/# 通用组件（跨模块复用）│ │ ├── Button/ │ │ ├── Dialog/ │ │ └──... │ └── pages/ │ └── workbench/# 工作台主页面（核心！）│ ├── components/# 工作台的 UI 组件│ ├── store/# MobX 状态管理│ ├── services/# 服务层（API、WebSocket）│ └── utils/# 工作台专用工具├── package.json ├── vite.config.ts └── tsconfig.json

💡小贴士：现在看不懂没关系，我们会一步步搭建。先记住一个原则：文件夹按功能分，不按类型分。比如「聊天相关的所有东西」放在一起，而不是「所有组件放一个文件夹，所有样式放另一个」。

1.5 本章小结

你学到了什么？

1. ✅ 知道了 AI Agent 工作台是做什么的
2. ✅ 了解了项目用到的技术栈
3. ✅ 把 Vite + React + TS 项目跑起来了
4. ✅ 对项目目录结构有了初步印象

关键术语回顾

✏️ 动手练习

1. 把项目在本地跑起来，访问http://localhost:5173/确认能看到页面
2. 试着修改src/App.tsx里的文字，看看页面会不会自动刷新（热更新）
3. 在本子上画一下你想象中的 AI 工作台界面草图

下一章我们会用简单易懂的方式，搞明白一个 AI 工作台项目到底是怎么「分层」的，为什么要这么设计。