前言

  大环境不好，公司为了降本增效。研发部门全员拥抱AI，前后端都要用起来。回归开发本源，前后端一个人做。
  也不知道知道是哪位领导选型的，选的cursor，但是我不分享它，我分享Trae的初之验。也许是选cursor国外的BG高些，也许是Trae还没有win版本，我用的mac，今天就分享下字节哥的Trae。我这里主要是分享前端vue的项目构建，页面构建，我是后端。

---

一、Trae介绍

  他的官网：https://www.trae.ai/
  是字节哥的AI编程工具产品，本国码农应该感谢字节哥吧，只有百花齐放，才能把价格打下来。
  Trae 是一款面向开发者的 AI 驱动的集成开发环境（IDE）。它通过智能代码补全、多模态交互以及对整个代码库的上下文分析等功能，帮助开发者更高效地编写代码。Trae 的主要优点在于其强大的 AI 能力，能够理解开发者的需求并提供精准的代码生成和修改建议。该产品目前提供免费版本，旨在帮助开发者减少重复性任务，专注于创造性工作，从而提升编程效率和生产力。它集成了国外主流的大模型 Claude-3.5-Sonnet 和 GPT-4o，且目前免费使用，在功能上与 Cursor 和 Windsurf 等产品形成竞争态势，同时支持从 VS Code 和 Cursor 等工具迁移配置，方便开发者快速上手。
  Trae 主要面向希望提高编程效率、减少重复性任务的开发者，无论是初学者还是经验丰富的开发人员，都可以通过 Trae 的智能辅助功能提升编码速度和质量。此外，对于需要快速构建项目的团队，Trae 的聊天构建模式也能提供显著帮助。

二、使用步骤

1.Trae安装

  安装过程我就不说了，基本是下一步下一步，没啥好说的，字节哥人性化的安装之初就可以先选语言-简体中文。

2.账号注册

  账号注册，都是大同小异，也没啥好说的，我这里直接用的Google的账号。

3.新建文件夹

  我这里就是先在自己喜欢的目录建一个Trae的文件夹，以后计划所有Trae项目都在这个文件夹里。

4.打开Trae，建项目

  在右边的AI交互界面，选择Builder模式，目前这里应该还在优化改进，因为这里显示是Beta的。下面我就从说的第一句话开始截图吧。



  过程中有交互的接受、运行按钮点击，他AI think的结果也会文字打印出来。
  npm run dev，启动过程中，有报错，没有启动起来，他也是自己就继续AI think，自己修改后，又会再次npm run dev。上面就是解决了报错的启动效果。
  下面是我要他写一个登录页面。

  界面上因为我没有自己加上/login路径，所以一直看到到，我就跟他说看不到，后来他自己在新的启动页面自己带上。
  这中间一个有趣的过程，我中午去吃饭，电脑锁屏，所以断网了。下午休息好了，打开，我不想重新高，我就直接跟他说“继续”，然后有趣的现象发生了，他就真的继续。。。。。。

  页面画完的效果，过程中，为对样式不满意。有样式要求的交互，他也确实改了，但是要说好看还不够，只能说80  分吧。如果有更高要求的开发看，估计勉强算及格。

  通过与AI沟通 + 微调，就是上面的效果了，可以看到左边、上边的留白都修复了。
  然后点击登录，基本的校验也有了。

  看效果，他真的就跟你补充了接口调用逻辑哦。
  这里登录成功后，他生成的是跳转首页，然后我要求他跳转到About

  真的改了耶，后面大家就可以自己试验了哦。
  专业的前端应该沟通的可以更细致，人为帮他纠正配合的应该更默契。

---

总结

• AI真强大，是福不是祸，是祸躲不过哦。
• 但是真的，真的还是不能完全取代人类，至少目前还不行。
• 字节大哥的Trae也特别牛逼plus，欢迎mac高富帅先用。
• 字节的大模型大家可以看下哦，我这次是Claude-3.5-Sonnet全程陪我玩的哦
    就写到这里吧，好好学习，天天向上。
    腹有诗书气自华，未来不迷茫，加油，uping！