AI 编程:一行代码不写 20 分钟开发网站?

404 阅读5分钟

欢迎关注公众号:前端成长指南

最近关于 AI 辅助编程、AI 应用的话题很火,尤其是 deepseek 大火持续,很多人都在写,比如 cursor 的使用、deepseek 的应用,但是我实在不想跟风,我也提不起兴趣(主要是我也不懂,哈哈)。

其实我对 AI 的使用、AI 对现实世界的意义,有一点不乐观的看法。我从 ChatGPT 刚出来时就在使用,确实对编程生成代码有很大帮助,是很强大的工具。但是我也会感慨:

  • 对于你擅长的领域、真正要解决问题时,你就知道 AI 有多鬼扯。
  • 看看现在网络文章的配图:在介绍 AI 使用的文章中,插入和内容完全无关的用 AI 生成的图片。
  • 可以想象 AI 每天在制造多少的网络垃圾。

但是,当我觉得 AI 做的事情有限、副作用很多的时候,并不代表对其他人没有意义,AI 让创造变得简单,打破了很多不可能,以前是:有想法不重要,重要的是实现,现在是:实现不重要,有想法才重要。因为 AI 能帮你实现。

行动力很重要,AI 让行动力变得容易。

扯得有点多,进入正题。现在有很多“一行代码不写,20 分钟开发网站上线”的文章,真的这么快吗?我们也来试试。

cursor 的使用

cursor 是一款 AI 代码编辑器,基于 VS Code 开发,安装的过程就可以将 VS Code 的设置导入进来,在界面上可以说和 VS Code 没什么两样:

所以它的使用也没什么说的,只不过左边的功能栏变成横放了。右侧点击打开对话框。

主要功能就是对话里的 chat 和 composer,二者的区别是,chat 适合即时的调试和解答疑问,composer 更适合跨多个文件的复杂操作,直接生成代码应用到项目中。有说 composer 能直接应用代码,chat 不能,但是实际上 chat 也是能代码 apply。

目前看到账户中的每个月的免费额度:

  • Premium models:50
  • gpt-4o-mini or cursor-small:200

我在使用过程中使用过 chat 和 composer,模型都是 claude-3.5-sonnet, 消耗的都是 Premium models。

React Native App 生成

一直没有真正做过 App 开发,所以想尝试一下。作为 Web 前端,最熟悉的当然是 React 技术栈的 React Native,所以今天就使用这个。我想做的是一个记录梦的 App,暂时叫做 redream。

我就直接使用了,也没有什么技巧,新建一个项目文件夹,在对话 composer 中:使用最新的 React Native 技术栈,做一个记录梦的 App。cursor 简单分析了需求,就开始生成文件了,我只需要接受文件或重新生成。

因为没有使用 EXPO,所以我提示它使用 EXPO 重新生成。

然后运行 npx expo start,发现 package.json 不存在,App.js 是空的。直接应用修改。

然后遇到一个安装依赖报错的问题,直接应用修改。

启动成功,手机下载 expo-go,注册登录,然后显示 expo-go expo 版本是 52,而项目的 expo 依赖是 50,只能升级项目的依赖。

直接应用修改,但是报错:Native version mismatch. JavaScript version: 0.73.2, Native version: 0.76.6。还是继续应用生成的代码,react 版本改为了 19.0。

报错:The expo package was found in your package.json but we couldn't resolve the Expo SDK version. 直接应用修改,cursor 又将 expo 版本改为了 50,react 改为了 18.2。

这样就回到了原来的问题,真机上预览需要 expo 52。

安装依赖,package.json 中指定的 React 版本 (19.0.0) 与 React Native 0.76.0 所需的 React 版本 (^18.2.0) 不兼容。cursor 改为 18.2。

报错:(NOBRIDGE) ERROR Warning: Error: Exception in HostFunction: Unable to convert string to floating point value: "large",提示错误与 React Native 的新架构和屏幕组件有关,应用所有修改。

依然同样报错,提示错误通常与 react-native-screens 的配置有关,应用所有修改。

然后报错: (NOBRIDGE) ERROR Error: Unsupported top level event type "topInsetsChange" dispatched。提示这个错误与 react-native-safe-area-context 的版本有关。给了两个版本修改,一个是把 react 升为 19.0,一个是把 expo 降为 49。根据上面的报错可知,这两个做法都有问题。

然后 cursor 只是将 react 版本改为 18.2,仍然不行。

最后,我用 Google 搜索:Warning: Error: Exception in HostFunction: Unable to convert string to floating point value: "large"。打开第一条搜索结果,Stack Overflow 问题:stackoverflow.com/questions/7… 的第一个回答:

  • app.json file:"newArchEnabled: true"
  • ran the commands:npx expo-doctor
  • then:npx expo install --check

然后顺利解决问题。它会安装 expo-doctor,检查需要升级的依赖,然后进行安装,最后 react 的版本为 18.3.1,其他依赖也进行了升级。

很简陋的效果:

后续又想继续增加功能,但是和之前一样,遇到了更多的困难,而且我尝试使用 gpt-4o-mini,似乎效果差很多。而且,对话不能让它回到之前修改的某个版本,这挺不智能的。

总结

实际使用 cursor,一开始会觉得很惊艳,因为能直接生成项目,就像一开始使用 ChatGPT,直接生成想要的代码。

如果不熟练某一门技术,只靠这个对话,去解决开发中遇到的所有问题,还是挺难受的,反复的沟通报错,其实很浪费时间。

不过它确实能在 20 分钟内从无到有的做出产品,如果再掌握使用技巧,一定有更多更大的用处。

AI 没有铺天盖地渲染的那么大的作用,AI 写作不能代替人的表达,AI 编程也不能代替人解决问题的能力。 当然,也可能是我并没有正确使用,并没有全面认识这些新的技术。