前言

随着 AI 编程能力的逐渐增强， 氛围编程（Vibe Coding）开始变得流行起来，用户可以通过跟 AI 对话，几分钟就能完成之前数日、甚至数周的工作。

字节跳动推出的 AI 代码编辑器 Trae 是目前使用门槛比较低的一个智能编辑器。下面以 Trae 为例，使用 Vue3 作为前端基础框架，完成一个 CRUD 应用 。

技术栈

• Vue3（前端基础框架）
• ElementUI-Plus（UI层）
• IndexedDB（基于浏览器的 NoSQL 数据库）

原始需求

使用 Vue3 作为主体框架，使用基于浏览器的数据库，实现 纯前端的 CRUD，需要实现用户头像上传操作。

开发步骤

前端项目新建

打开 Vue 官网，查看对应新建项目教程。

项目初始化准备

使用 sourcetree 作为代码版本管理工具，方便后续回滚代码。

使用 Trae 打开项目，编辑器最左侧为项目目录页面，中间为代码编辑器，右侧为聊天框，可以跟 AI 提需求，执行操作等。

新一代智能编辑器 跟 传统编辑器+AI 插件 布局类似，但占据的比例更大，操作更协调。逐渐增大的 AI 面板，有意引导开发者更专注与 AI 的交流，更少的关注代码细节，这就是 Vibe Coding 的奥妙所在。

正式开发项目

通过描述原始需求，可以跟 AI 探讨、完善项目细节，待需求达成一致时，可以让 AI 生成项目代码。

第一版实现

可以看到 AI 生成的第一版代码，已经实现了大部分的增删改查逻辑（经测试，增删改查、生成测试数据等功能完全正常），整个界面使用的是 ElementUI-Plus 的默认样式，页面样式可能有些瑕疵。

逐渐完善

通过跟 AI 提出 响应式需求、修改主题色、增加用户头像上传 等逻辑，AI 也可以很快实现。

• 响应式（适配手机、平板端）与主题色修改
  
• 增加用户头像上传逻辑
  
  

思考

在 AI 不断发展的今天，编程的门槛越来越低。就拿这个 Demo 项目来说，虽然我没有 Vue3 的经验，但在短短几个小时内就完成了 CRUD 的需求。如今，解决问题的成本大大降低，个人解决问题的思路和能力变得更为重要。

保留对技术的关注与敏感还是有必要的，不要否认技术，觉得 AI 能生成的东西就很轻贱，不去了解。首先技术是为了解决问题而沉淀下来的能力，只要问题存在，那技术就有存在、学习的道理；其次，目前的 AI 还是存在一些缺点，编程时无法通过 AI 解决的问题，还是需要我们去手动解决。

在 AI 加持下的编程新纪元，传统程序员作为先行者，对编程有着更深的理解，相对于普通人有着独特的优势。AI 越来越强大，我们要做的不是对抗与抵制，而是要把它转为我们趁手的工具，作为一个智能助手来实现我们的需求。