不会编程也能开发 Web 应用，小学生都能学会的 AI IDE

笔者之前的文章提到，老婆在我的忽悠下，使用 AI 工具开始辅助办公。

我用 AI 让老婆的办公效率提升了 120 倍

后来我儿子也被我拖下水了。

之前笔者写过的文章：

• 使用 ChatGPT 帮助小学生编程入门系列之一：Python 编程读取和解析天气预报网页上的数据

• 使用 ChatGPT 帮助小学生编程入门系列之二：使用 Python 编程发送电子邮件

  文章里提到的 AI 辅助编程的方法已经过时了。现在流行的 AI IDE，已经用不着从 IDE 切换到浏览器，向大模型发出指令，而是直接在 IDE 的编辑界面内，实时同大模型通过对话的方式进行交互。这些 IDE 同大模型的对话，能够以 IDE 内的项目工程文件作为上下文，因此大模型给出的回复更加精准。同时 IDE 能够根据大模型的回复，自动且实时修改项目工程文件。这种区别于传统 「对话-手动修改」工作方式的全新模式，称为 Builder 模式。

  2025年2月27日，字节跳动正式宣布，旗下首款 AI 集成开发环境（IDE）——Trae AI IDE，将于近期在中国内地市场正式发布。Trace 内置了 Claude 最新的 3.7 Sonnet, 能够深度理解中文编程环境，极大地提升了开发效率。

  目前掘金社区已经开始了 Trae 的评测活动，我也收到了评测邀请。

  既然是一款 AI 辅助编程的开发工具，我突发奇想，能不能用它教我儿子编程，比如学习 Vue 开发？

  笔者以前教过我儿子手搓一些简单的 html, css 和 JavaScript. 写这些小玩意没有任何门槛，有一台电脑，懂一点简单的英语就能上手。孩子能即时收到反馈，很容易获得成就感。

  不过像 Vue 这种稍稍复杂一点的前端框架，我还没教我儿子用，更别提 Angular 和 React 了。

  说干就干。

  首先是搭环境。很多人评论说现在的一零后是伴随着智能手机和平板电脑长大的，对于 PC 操作的技能非常有限。

  其实现在小学都有信息技术课，所以孩子们对于基本的电脑操作还是有的。

  Trae 下载地址：

  https://www.trae.ai/?utm_source=juejin&utm_medium=juejin_trae&utm_campaign=techcall

  执行 .exe 安装程序，一路 next 搞定。

  

  启动 Trae，界面很清爽。对于用过 Visual Studio Code 的大人来说，可以直接上手。

  对于小学生来说，这个界面比火影忍者手游登录之后的首页要简洁多了。

  

  先用 kimi 给我儿子科普一下，什么是 Vue.

  小学生们可以把 Vue 想象成一个可以帮我们快速搭建房子的工具包。就像盖房子需要砖头、水泥等材料以及施工工具一样，Vue 提供了一些现成的组件和语法，方便开发者快速地构建网页。

  Vue 主要由模版、数据层和事件系统三部分构成。模版是画布，用来画出页面的模样；数据层是画家的颜料，决定了页面上的内容；事件系统则是画家的手，能让画布上的东西动起来，响应用户的操作。

  就像搭积木一样，用户可以通过 Vue 的组件化编程，把一个个独立的功能积木拼装在一起，最后搭建出整个精美的建筑。

  

  首先在电脑上随便找个位置，新建一个文件夹，取名 Vue.

  然后点击 Trae 上的 Open Folder 按钮。现在小学已经有英语课了，所以 Open folder 这些简单的单词还是学过的：

  

  发出指令：

  基于 Vue 框架，创建一个最简单的 Web 应用，显示一个包含 Hello World 的静态页面。

  Trae 内置了 Claude-3.7-Sonnect，生成了两个文件 app.js 和 index.html，并简单介绍了两个文件的作用。

  顺带让儿子阅读一下 Claude 的输出，练习一下阅读理解。反正都是简单句，也没有什么复杂的语法。

  

  利用 Trae 的 Claude，向小学生解释 app.js 和 index.html 的作用。

  index.html 好比我们要画一幅画之前，先准备好画布。这个画布是我们绘画的基础，没有画布，就没办法绘画。index.html 就是这样一块画布，网页上看到的内容，通过 html 语言的标签，展示在 index.html 里。

  app.js 好比比作一本菜谱，上面详细写了如何做一道菜，包括需要哪些食材、每一步的操作步骤等。

  Trae 生成这两个文件之后，自动启动了一个 Web Server，用于本地测试，屏幕右侧有一个醒目的 Preview 按钮，点击之后可以预览生成的应用。

  

  至此在预览区就能看到静态页面上的 Hello World 了。

  

  下面我们对这个静态页面稍加修改：

  把 index.html 的内容替换成一个下拉列表，下拉列表里有三个值：成都，重庆和上海。

  Trae 自动修改相关文件并刷新：

  

  这个下拉列表也能正常工作：

  

  继续迭代：

  增加一个按钮，点击之后，显示一个弹出对话框，显示当前选中的下拉列表里的值。

  Trae 的生成记录显示，它试图实现一个模态对话框(modal dialog), 但最后用的是一个 div 元素来模拟。

  

  效果如下：

  

  再来加点难度。我期望点击按钮后，能显示选中城市的天气情况。

  网上有很多免费的天气查询 API，比如高德的这款：

  https://restapi.amap.com/v3/weather/weatherInfo?key=&city=110000&extensions=all

  其中城市编号 110000 代表北京。

  上面 url 在浏览器访问，输出如下：

  

  在动手调用 API 之前，我们把这个需求进行拆解。

  首先，在下拉列表里选中某个城市时，我们必须先获得该城市在高德 API 里的编号。

  因为只有三个城市，所以采用硬编码的方式。

  发出指令：

  成都的代号为 510100

  重庆的代号为 310000

  上海的代号为 500000

  在点击按钮后，显示当前下拉列表里选中的城市的代号。

  Trae 在 app.js 里，添加了城市名称到代码的键值对 cityCodes:

  

  测试了一下，没有什么问题：

  

  下面开始 API 调用的实现。

  发出指令：

  点击按钮后，发送 HTTP 请求，并将请求返回的数据，通过 console.log 原封不动的打印出来。

  HTTP 请求格式：https://restapi.amap.com/v3/weather/weatherInfo?key=&city=&extensions=all

  其中 需要被下拉列表里当前选中的城市代号所替代。比如当前下拉列表选择的是上海，则 需要被替换成上海的代号 500000.

  

  在浏览器里测试通过，可以在 Chrome 开发者工具 Console 面板里，看到高德天气预报 API 的输出：

  

  因为我们只对天气预报的日期，是否下雨，和当天的温度感兴趣，所以只打印这三个值。

  发出指令：

  将 API 返回的 JSON 数据进行解析，提取出里面有个名为 forecasts 数组的 casts 数组的所有元素，用 console.log 打印出每个元素的 date, daytemp 和 dayweather 三个字段的值。

  

  Trae 帮我们添加了解析 API 返回结果的代码，并且正确输出了三个字段的值：

  

  最后一步，把在控制台输出数据的 console.log 语句替换成 Vue 里的表格控件。

  发出指令：

  点击按钮之后，不要使用 console.log 输出解析的 API 响应数据，而是用 Vue 里的表格控件进行输出。

  表格分为三列，每列的数据源，依次来自上述 casts 数组元素的 date，daytemp 和 dayweather.

  这个任务，Trae 完成得也非常漂亮。

  

  至此我们没有动手编写一行代码，就用 Vue 实现了一个简单的城市天气查询的 Web 应用。

  当然，本文有标题党的嫌疑，因为实际操作过程，更准确的说应该是用自然语言来开发 Vue 应用。Trae 自动生成的代码，对小学生来说仍然是一个黑盒子，仍然需要去学习理解。不过，像 Trae 这种 AI 工具，确实大大降低了全民学习编程的门槛。

  更多阅读

  • 使用 ChatGPT 帮助小学生编程入门系列之一：Python 编程读取和解析天气预报网页上的数据

  • 使用 ChatGPT 帮助小学生编程入门系列之二：使用 Python 编程发送电子邮件

  • 我用 AI 让老婆的办公效率提升了 120 倍

  • 懒出天际：连提示词也不愿意自己写了！

  • 一个成都七中的初中生，出于兴趣爱好实现的 Win12 UI 页面效果，佩服佩服

  • 开学已经一个月了，老师把最近考试成绩发到了微信群里，我用 ChatGPT 简单分析一下