当前位置: 首页 > news >正文

【零基础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:安装 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.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 支持好
# 安装 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 20JS 运行环境node -v
pnpm包管理器pnpm -v
Git版本控制git --version
VS Code代码编辑器打开即可
DeepSeek API KeyAI 模型服务测试脚本通过

下一章预告

我们将创建 Next.js 项目,了解项目的目录结构,学习 App Router 的路由系统。你将第一次运行起话喵的开发服务器,看到一个空白的页面。


如果这个教程对你有帮助,欢迎 ⭐ Star 支持一下!

  • 📦 教程仓库:https://github.com/ZIQI-a/AI_Agent_study

  • 🚀 成品项目:https://github.com/ZIQI-a/huamiao_Agent

http://www.jsqmd.com/news/1076165/

相关文章:

  • PHP文件包含漏洞与Phar反序列化攻击链深度剖析与防御实践
  • 精准选对矩形导向轨,专业制造商该看哪些点
  • RAG+多智能体:金融AI分析的可验证工程实践
  • 机器学习落地闭环:从Notebook到生产环境的实战指南
  • 传统后端程序员,如何利用业余时间3-6个月转行高薪AI应用开发
  • 为什么你收藏了 100 个 Skills,也未必能用得好 AI 编程?
  • 高级 | 系统工程与信息系统基础错题集
  • GPT-3范式迁移:从微调到提示驱动的NLP革命
  • 关闭 VIP 通道(高频踩坑点)
  • 5种实战方案:如何用智能浏览器自动化重构你的工作流
  • 从“问对问题”到“建对系统”:Prompt、Context、Loop、Harness 工程的演变与理解
  • CSRF攻击原理深度解析:从身份冒用到防御实战
  • Appsmith:开源低代码平台,快速构建内部工具
  • 7个已落地AI工程方向:轻量化部署、RAG增强、多模态理解等实操指南
  • 人形机器人全身动作跟踪算法解析:从参考动作、奖励函数到真实机器人部署
  • 在长度2N的数组中找出重复N次的元素(一)
  • 多级蒙特卡洛梯度估计:原理、复杂度分析与在随机优化中的应用
  • 深圳登报声明去哪里办理?深圳登报声明要多少钱?
  • MitoHiFi:5步掌握PacBio HiFi线粒体基因组组装完整指南
  • 向量空间 JBoltAI TokUI 底层设计理念与技术演进
  • PUBG罗技鼠标压枪宏:三步实现终极后坐力控制的完整指南
  • okbiye AI 写作数据分析:自动生成 docx 实证报告,解决社科论文数据处理难题
  • 智能家居:基于单点薄膜压力传感的防盗预警/门状态感应方案
  • 高校专业课融入AI实操找哪家?看实战云的解决方案
  • 三步搞定视频水印:AI智能批量去除的终极指南
  • SubFinder:智能字幕搜索工具,让影视观看体验更完美
  • DeepSeek / 通义千问 / 文心一言多模型统一调用的最佳实践
  • WAVES 2026 大会聚焦 AI 投资:嘉宾热议各赛道趋势、创业者特质与未来机会
  • Flowframes深度解析:专业AI视频插值与帧率提升实战指南
  • 【毕业设计】基于 SpringBoot+UniApp 的冀鲁豫智慧旅游出行系统设计与实现 基于 SpringBoot+UniApp 的冀鲁豫旅游资源展示平台(源码+文档+远程调试,全bao定制等)