Trae 简介与安装
🔦 什么是 Trae
Trae 是大厂字节跳动出品的国内首个 AI IDE,深度理解中文开发场景。AI 高度集成于 IDE 环境之中,为你带来比 AI 插件更加流畅、准确、优质的开发体验。说是能够不用写代码,全靠一张嘴跟 AI 聊天就把项目做起来,确实要试试,看看以后的抢走码农饭碗的到底是什么东西🤭。
Trae 自带豆包、DeepSeek 大模型,目前支持 windows、MAC 平台,linux 也在加速落地ING👍。
📦 安装
从官网下载最新的安装包,双击🛫:
选择自己喜欢的主题,我比较喜欢暗色😎:
接着导入配置,支持导入 VSCode 的配置,平滑过渡😄:
我们可以添加命令行,也就是在终端/Terminal 中使用命令trae
启动,个人觉得没啥必要:
好了,一切就绪,开始 Trae 的使用之旅吧!此处建议注册并登录😁。
编辑器布局如下:
🛠️ 从零开始创建项目
首先我们切换到 Builder
模式:
输入我们项目的基本信息:
根据提示一步步操作,我在安装依赖时报错:
此时需要修改正确的版本号😂。
接着我们生成 rsbuild 的配置文件rsbuild.config.js
:
js
import { defineConfig } from '@rsbuild/core';
import { pluginVue } from '@rsbuild/plugin-vue';
export default defineConfig({
plugins: [pluginVue()],
source: {
entry: {
index: './src/main.js'
}
},
html: {
template: './index.html'
},
output: {
distPath: {
root: 'dist'
}
}
});
接下来,创建第一个页面,继续给 Trae 描述我们的需求:
可以看到创建出来的页面是有模有样的,不过还有以下小问题:
- 没有用到我们依赖的
Naive UI
组件库(可能是没在提示词中注明) - 启动命令还是用
npm
,我以及在前面多番强调要用pnpm
😔
我们试下让页面使用 Naive UI
组件:
达到了预期效果👍。我们通过pnpm dev
命令启动项目,可以看到如下的效果:
继续让 Trae 帮我们写一个登录页面:
总结
简单试用下来,Trae 能够处理简单的工作,但是细节还有待提升。对老手来说,并没有自己动手复制粘贴快。
而且,还有一些问题:
- 有时候会碰到文件在人工修改后,下次由 AI 修改被覆盖的情况😂
- 配置路由(vue-router)时,暂不能很好的生成正确的代码
总之目前 Trae 还是一个不够成熟的工具,期待它不断强大起来。