Vibe Coding实践指南
用AI做一些有趣的事情
📋 实践步骤
本节课我们将动手实践Vibe Coding的编程模式，在此之前需要先配置好开发环境，在下面的教程中我们推荐使用VSCode + Cline接入自己的api_key的方式，接入各种大模型来辅助开发，推荐理由是VSCode拥有非常丰富的插件生态，而Cline则是AI编程的开源利器，能够在一个入口集成各种丰富多样的大模型、MCP工具等能力。
如果你已经掌握了Vibe Coding的理念，并在实际开发过程中已经体验过Github Copilot、Cursor、Trae IDE、Claude Code等目前领先的开发工具，你可以跳过这部分，前往文末的Python生态应用推荐部分根据自己的兴趣自由探索，尝试用AI辅助编程来完成一个小项目。
进度确认
我们使用Supabase Realtime API实现了实时进度同步功能，你可以在页面上方检查连接状态。在每一个步骤执行完成后，你可以点击“我已配置好XXX”来更新进度
基础环境配置
步骤 1: 下载安装Python
前往Python官网下载并安装Python
步骤 2: 下载安装VSCode
前往VSCode官网下载并安装VSCode（Visual Studio Code）
步骤 3: 安装Cline插件
在VSCode中，打开侧边的扩展商店（Extensions），搜索并安装Cline插件。
步骤 4: 下载并安装NodeJS
NodeJS是一个JavaScript运行时，即使不开发前端项目，使用一些MCP工具还是需要它的支持。前往NodeJS官网下载并安装NodeJS。
加速国内下载
nodejs和python都有丰富的生态，直接使用开源的包和库能够大大提升开发效率。如果你在国内下载这些工具时遇到网络问题，可以考虑使用国内的镜像源，我们推荐Python使用由北京大学开源镜像站维护的镜像源，NodeJS可以使用阿里镜像源。
具体而言，你可以通过下面的代码在终端/PowerShell中配置镜像源：
# 配置Python镜像源
pip config set global.index-url https://mirrors.pku.edu.cn/pypi/web/simple
# 配置NodeJS镜像源
npm config set registry https://registry.npmmirror.com配置Cline插件
步骤 5: 获取API Key
使用下方的表单输入你的学号和姓名，获取专属的 API Key 用于配置 Cline 插件，该API KEY内含10美元额度，可用于在Cline中调用大模型服务
获取你的 API Key
输入你的学号和姓名来获取专属的 API Key，获取后将自动复制到剪贴板
💡 温馨提示：
- 请确保输入的学号和姓名与课程注册信息一致
- API Key 获取后会自动复制到剪贴板
- 请妥善保管你的 API Key，不要与他人分享
然后在Cline的模型配置中使用OpenAI Compatible Provider，并将获取到的 API Key 填入对应的输入框中，Base URL填写https://yunwu.ai/v1，Model ID填写gpt-5-chat-latest
步骤 6:安装MCP插件——Context7
点击Cline右上角第二个按钮，打开MCP Servers插件市场，安装插件Context7
这是什么？
AI一个很大的问题在于无法获取最新的技术趋势以及技术文档信息，Context7 MCP服务器内嵌了很多最新的技术文档，以方便LLM理解的方式呈现，能够帮助AI更好地理解和生成符合指定技术框架要求的代码
安装提示
如果你在安装过程中遇到要求提供Context7 API Key的提示，可以让AI忽略。对于我们的大多数任务，Context7插件的免费额度已经足够使用
🚀 开始Vibe Coding
重要能力：
- 阅读别人写好的技术文档并动手复现
- 使用别人写好的开源项目
- 问AI了解需要的技术栈，大致知道什么任务该用什么样的技术
剩下的都交给AI吧！
步骤7：学会使用终端安装需要的Python包
在终端中使用以下命令安装所需的Python包（比如常用的绘图工具库matplotlib）：
pip install matplotlib你可以在VScode中直接使用终端，对于Windows用户，也可以使用PowerShell，推荐的打开方式为在Windows图标上右键，选择“Windows PowerShell”，然后在打开的终端中输入上述命令。 对于Mac用户，可以使用自带的终端应用。
实践环节
- 用ai来辅助理解数学函数
- 使用flet包创建一个界面美观的图形化2048小游戏