news 2026/6/25 17:23:11

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

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
【零基础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

版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
网站建设 2026/6/25 17:22:37

macOS Intel Wi-Fi驱动解决方案:从零开始实现完美无线连接

macOS Intel Wi-Fi驱动解决方案:从零开始实现完美无线连接 【免费下载链接】itlwm Intel Wi-Fi Drivers for macOS 项目地址: https://gitcode.com/gh_mirrors/it/itlwm 当你在macOS上使用Intel无线网卡时,是否遇到过驱动不兼容、网络连接不稳定或…

作者头像 李华
网站建设 2026/6/25 17:21:51

计算机视觉/图像处理/机器学习Python和C/C++

1-计算机视觉/图像处理/机器学习等相关方向; 2-扎实的Python和C/C编程; 3-熟悉常见的深度学习算法,熟悉至少一种深度学习框架,包括PyTorch/Tensorflow/MxNet/Caffe等; 4-具备钻研精神和创造力,能够通过阅读论文学习最新算法和理论&#xff1b…

作者头像 李华
网站建设 2026/6/25 17:21:17

终极ADB图形化管理工具:QtAdb让Android调试从未如此简单

终极ADB图形化管理工具:QtAdb让Android调试从未如此简单 【免费下载链接】QtAdb 项目地址: https://gitcode.com/gh_mirrors/qt/QtAdb QtAdb是一款基于Qt框架开发的Android调试桥(ADB)图形化管理工具,专为Android开发者和…

作者头像 李华
网站建设 2026/6/25 17:19:54

Typora插件完整指南:终极免费工具集让Markdown创作效率提升300%

Typora插件完整指南:终极免费工具集让Markdown创作效率提升300% 【免费下载链接】typora_plugin Typora Plugin. Feature Enhancement Tool | Typora 插件,功能增强工具 项目地址: https://gitcode.com/gh_mirrors/ty/typora_plugin 还在为技术文…

作者头像 李华
网站建设 2026/6/25 17:19:22

Struts2全版本漏洞检测工具实战:原理、应用与自动化集成

1. 项目概述与核心价值最近在整理内部安全资产时,又翻出了这个老伙计——Struts2系列漏洞利用工具。说它是“老伙计”一点不为过,从S2-001到S2-061,从OGNL表达式注入到远程代码执行,Struts2框架的漏洞史几乎就是一部Web安全攻防的…

作者头像 李华
网站建设 2026/6/25 17:16:27

离婚协议有必要公证吗?离婚协议公证怎么办理?【离婚必看】

很多朋友签完离婚协议后总会纠结:这张纸到底要不要公证?其实离婚协议公证并非法定强制要求,但办理后能给协议效力再加一层保障,尤其适合人在异地、身处国外或是没时间跑线下公证处的人群,既能避免后续因为协议内容扯皮…

作者头像 李华