📦 项目教程仓库:https://github.com/ZIQI-a/AI_Agent_study
🚀 成品项目地址:https://github.com/ZIQI-a/huamiao_Agent
本章目标
要做的事:安装所有开发工具,注册 AI 服务,确保环境可用
学到的知识:
包管理器是什么,为什么用 pnpm 而不是 npm
环境变量的作用和安全注意事项
API Key 是什么,如何安全使用
1.1 安装 Node.js
Node.js 是 JavaScript 的运行环境,让 JS 可以在浏览器之外运行。我们的 Next.js 项目依赖它。
推荐用 nvm 安装(版本管理器)
nvm 可以让你在同一台电脑上安装和切换多个 Node.js 版本,就像 Python 的 pyenv。
# macOS / Linux:安装 nvmcurl-o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.1/install.sh|bash# 重新打开终端,或执行source~/.zshrc# 如果你用 zshsource~/.bashrc# 如果你用 bash# 安装 Node.js 20 LTS(推荐)nvminstall20# 设置默认版本nvmaliasdefault20# 验证安装node-v# 应该显示 v20.x.xnpm-v# 应该显示 10.x.xWindows 用户
直接从 nodejs.org 下载 LTS 版本安装即可。
知识点:LTS 是什么?
LTS = Long Term Support(长期支持版)。Node.js 有两个发布线:
LTS:稳定,适合生产环境,推荐使用
Current:最新特性,可能有 bug
1.2 安装 pnpm
pnpm 是包管理器,用来安装项目依赖的第三方库。
为什么用 pnpm 而不是 npm?
npm: Node.js 自带,最基础 yarn:Facebook 出品,曾经流行 pnpm:更快、更省磁盘空间,现在主流推荐 pnpm 的优势: ✅ 安装速度快(比 npm 快 2-3 倍) ✅ 磁盘占用小(全局存储,项目间共享) ✅ 严格的依赖管理(不会幽灵依赖) ✅ Monorepo 支持好# 安装 pnpmnpminstall-gpnpm# 验证pnpm-v# 应该显示 9.x.x 或更高知识点:什么是"包"?
就像前端的 npm 包,Python 的 pip 包。别人写好的代码,你通过包管理器安装后直接使用。pnpm add react就是把 React 的代码下载到你项目的node_modules目录里。
1.3 安装 Git
Git 是版本控制工具,管理代码的变更历史。部署到 Vercel 需要 Git 仓库。
# macOS(通常自带,检查一下)git--version# 如果没有,通过 Xcode 命令行工具安装xcode-select--install# 配置用户信息(替换为你自己的)gitconfig--globaluser.name"你的名字"gitconfig--globaluser.email"你的邮箱"1.4 安装 VS Code
从 code.visualstudio.com 下载安装。
推荐插件
安装后打开 VS Code,按Cmd+Shift+X(Mac)或Ctrl+Shift+X(Windows)打开插件市场,搜索安装:
必装: - Chinese (Simplified) Language Pack → 中文界面 - Tailwind CSS IntelliSense → Tailwind 智能提示 - ES7+ React/Redux/React-Native snippets → 代码片段 - Prettier - Code formatter → 代码格式化 - ESLint → 代码检查 推荐: - GitLens → Git 增强 - Error Lens → 错误高亮显示 - Auto Rename Tag → HTML 标签自动重命名1.5 注册 DeepSeek API Key
DeepSeek 是国产大模型,中文能力强,价格便宜,是我们项目的主力 AI 引擎。
注册步骤
打开 platform.deepseek.com
注册账号(手机号即可)
进入控制台,找到「API Keys」
点击「创建 API Key」,复制保存
充值
DeepSeek 的价格非常便宜:
输入:1 元 / 百万 Token(约 75 万汉字) 输出:2 元 / 百万 Token 对比: GPT-4o 输入:约 18 元 / 百万 Token DeepSeek 便宜约 18 倍 学习阶段充 10 元够用很久验证 API Key
创建一个临时测试文件:
# 创建测试目录mkdir-p~/ai-test&&cd~/ai-test# 初始化pnpminit# 安装 OpenAI SDK(DeepSeek 兼容 OpenAI 格式)pnpmaddopenai创建测试文件test.mjs:
importOpenAIfrom"openai";constclient=newOpenAI({apiKey:"你的DeepSeek-API-Key",// 替换为你的 KeybaseURL:"https://api.deepseek.com",});asyncfunctionmain(){constresponse=awaitclient.chat.completions.create({model:"deepseek-chat",messages:[{role:"user",content:"你好,请用一句话介绍你自己"}],});console.log("AI 回复:",response.choices[0].message.content);}main().catch(console.error);运行测试:
nodetest.mjs如果看到 AI 的回复,说明 API Key 配置成功。
知识点:API Key 安全
API Key 就像密码,泄露后别人可以用你的额度调用 AI。
绝对不要把 API Key 写在代码里提交到 Git
使用环境变量存储(后面会教)
不要在前端代码中使用 API Key(前端代码用户可以看到)
1.6 注册通义千问 API Key(可选)
作为备选模型,可以先注册好。
打开 dashscope.console.aliyun.com
用阿里云账号登录
开通 DashScope 服务
创建 API Key
通义千问同样兼容 OpenAI SDK:
constqwen=newOpenAI({apiKey:"你的通义千问API-Key",baseURL:"https://dashscope.aliyuncs.com/compatible-mode/v1",});constresponse=awaitqwen.chat.completions.create({model:"qwen-turbo",messages:[{role:"user",content:"你好"}],});1.7 环境变量配置
环境变量是存储敏感信息(如 API Key)的标准方式。它们不会被提交到代码仓库。
创建全局环境变量文件
# 在用户目录创建 .env 文件(全局使用)cat>>~/.zshrc **知识点:环境变量 vs 代码中的变量**>>>```>代码中的变量:写在代码里,提交到 Git,所有人可见>环境变量: 存在操作系统中,不进 Git,只有本机可见>>敏感信息(密码、Key、密钥)必须用环境变量>```## 1.8 清理测试文件```bash# 删除测试目录rm-rf~/ai-test本章小结
| 工具 | 用途 | 验证命令 |
|---|---|---|
| Node.js 20 | JS 运行环境 | node -v |
| pnpm | 包管理器 | pnpm -v |
| Git | 版本控制 | git --version |
| VS Code | 代码编辑器 | 打开即可 |
| DeepSeek API Key | AI 模型服务 | 测试脚本通过 |
下一章预告
我们将创建 Next.js 项目,了解项目的目录结构,学习 App Router 的路由系统。你将第一次运行起话喵的开发服务器,看到一个空白的页面。
如果这个教程对你有帮助,欢迎 ⭐ Star 支持一下!
📦 教程仓库:https://github.com/ZIQI-a/AI_Agent_study
🚀 成品项目:https://github.com/ZIQI-a/huamiao_Agent