【零基础AI应用开发】第01章：环境搭建与工具安装（入门篇）

📦 项目教程仓库：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：安装 nvm
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.1/install.sh | bash

# 重新打开终端，或执行
source ~/.zshrc  # 如果你用 zsh
source ~/.bashrc # 如果你用 bash

# 安装 Node.js 20 LTS（推荐）
nvm install 20

# 设置默认版本
nvm alias default 20

# 验证安装
node -v   # 应该显示 v20.x.x
npm -v    # 应该显示 10.x.x

Windows 用户

直接从 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 支持好

# 安装 pnpm
npm install -g pnpm

# 验证
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

# 配置用户信息（替换为你自己的）
git config --global user.name "你的名字"
git config --global user.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 引擎。

注册步骤

1. 打开 platform.deepseek.com
2. 注册账号（手机号即可）
3. 进入控制台，找到「API Keys」
4. 点击「创建 API Key」，复制保存

充值

DeepSeek 的价格非常便宜：

输入：1 元 / 百万 Token（约 75 万汉字）
输出：2 元 / 百万 Token

对比：
  GPT-4o 输入：约 18 元 / 百万 Token
  DeepSeek 便宜约 18 倍

学习阶段充 10 元够用很久

验证 API Key

创建一个临时测试文件：

# 创建测试目录
mkdir -p ~/ai-test && cd ~/ai-test

# 初始化
pnpm init

# 安装 OpenAI SDK（DeepSeek 兼容 OpenAI 格式）
pnpm add openai

创建测试文件 test.mjs：

import OpenAI from "openai";

const client = new OpenAI({
  apiKey: "你的DeepSeek-API-Key",  // 替换为你的 Key
  baseURL: "https://api.deepseek.com",
});

async function main() {
  const response = await client.chat.completions.create({
    model: "deepseek-chat",
    messages: [{ role: "user", content: "你好，请用一句话介绍你自己" }],
  });

  console.log("AI 回复：", response.choices[0].message.content);
}

main().catch(console.error);

运行测试：

node test.mjs

如果看到 AI 的回复，说明 API Key 配置成功。

知识点：API Key 安全
API Key 就像密码，泄露后别人可以用你的额度调用 AI。

• 绝对不要把 API Key 写在代码里提交到 Git
• 使用环境变量存储（后面会教）
• 不要在前端代码中使用 API Key（前端代码用户可以看到）

1.6 注册通义千问 API Key（可选）

作为备选模型，可以先注册好。

1. 打开 dashscope.console.aliyun.com
2. 用阿里云账号登录
3. 开通 DashScope 服务
4. 创建 API Key

通义千问同样兼容 OpenAI SDK：

const qwen = new OpenAI({
  apiKey: "你的通义千问API-Key",
  baseURL: "https://dashscope.aliyuncs.com/compatible-mode/v1",
});

const response = await qwen.chat.completions.create({
  model: "qwen-turbo",
  messages: [{ role: "user", content: "你好" }],
});

1.7 环境变量配置

环境变量是存储敏感信息（如 API Key）的标准方式。它们不会被提交到代码仓库。

创建全局环境变量文件

# 在用户目录创建 .env 文件（全局使用）
cat >> ~/.zshrc << 'EOF'

# AI API Keys
export DEEPSEEK_API_KEY="你的DeepSeek-API-Key"
export QWEN_API_KEY="你的通义千问-API-Key"
EOF

# 使配置生效
source ~/.zshrc

# 验证
echo $DEEPSEEK_API_KEY  # 应该输出你的 Key

知识点：环境变量 vs 代码中的变量

代码中的变量：写在代码里，提交到 Git，所有人可见
环境变量：    存在操作系统中，不进 Git，只有本机可见

敏感信息（密码、Key、密钥）必须用环境变量

1.8 清理测试文件

# 删除测试目录
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