不会编程也能开发 Web 应用，小学生都能学会的 AI IDE
原创不会编程也能开发 Web 应用，小学生都能学会的 AI IDE
原创
笔者之前的文章提到，老婆在我的忽悠下，使用 AI 工具开始辅助办公。
后来我儿子也被我拖下水了。
之前笔者写过的文章：
文章里提到的 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=<api 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=<api key>&city=<city code>&extensions=all
其中 <city code>需要被下拉列表里当前选中的城市代号所替代。比如当前下拉列表选择的是上海，则 <city code> 需要被替换成上海的代号 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 工具，确实大大降低了全民学习编程的门槛。
更多阅读
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
腾讯云开发者
