Trae字节推出AI编程你确定不来使用试试？我正在参加Trae「超级体验官」创意实践征文，本文所使用的 Trae 免

我正在参加Trae「超级体验官」创意实践征文， 本文所使用的 Trae 免费下载链接： www.trae.ai/?utm_source…

Trae字节跳动推出AI编程你确定不来使用试试？

我觉得我们首先知道我们需要一个什么样的辅助编程类的AI，大胆一点：我想要产品告诉我需求后，经过我的脑袋想一下，这个AI就能给我实现项目，这个样子我就能好好摸鱼了！！

未来应该肯定可以达到这个高度，但是也预示着可能就不需要程序员了！

说下现在AI ChatGPT 问世后，国内的AI也是百花起放，首当其冲的是豆包、通义灵码、Kimi等等

我先说下本人对这些chatGpt产出后的一些使用,主要体现在查询上，我遇到问题了我会去问gpt，得到的答案很中肯，有好的有坏的，但是我感觉要比我查询高效很多，尤其是在我不科学上网的情况下。我觉得我不需要科学上网，就能得到我想要的答案了

我查询类的问题会去问KIMI, vscode插件安装的是通义灵码，我通义灵码主要用来做代码提示（摁Tab回车应用），有些时候还是蛮好用的。

Trae的底层大模型

缺点：现在需要科学上网并 Mac用户 才能去使用，预计春节过后发布windows版本 ,因为它的底层模型使用的是Claude 3.5 Sonnet和GPT-4o。

都是一些国外的大模型，GPT-4o就不在多说了，咱们来说下Claude 3.5 Sonnet

Claude 3.5 Sonnet 是由 Anthropic 公司研发的先进人工智能模型。Anthropic 是一家专注于开发高性能人工智能模型的公司，Claude 3.5 Sonnet 是其 Claude 系列模型中的最新版本，于 2024 年 6 月 21 日正式发布。

性能提升：Claude 3.5 Sonnet 在多项基准测试中超越了 OpenAI 的 GPT-4o 和谷歌的 Gemini 1.5 Pro。它在编码、数学推理、视觉处理等方面表现出色，尤其在编码能力上解决了 64% 的问题，显著高于前代的 38%。
多模态支持：该模型支持文本和图像输入，能够处理复杂的视觉任务，如图表解释和从不完美图像中转录文本。
性价比高：Claude 3.5 Sonnet 的成本仅为前代 Claude 3 Opus 的五分之一，每百万输入 tokens 仅需 3 美元，输出 tokens 15 美元。

从现在的Trae来看目前还没有收费用，未来感觉会有收费，万事肯定是以盈利为基础的。所以趁着还没收费，先爽了再说。你可以说他是套壳。但是为了提供好的服务，整合好的资源本身就是一种能力啊。

Trae 的界面

可是使用trae命令直接唤起 trae 应用（前提是安装了trea命令）

Trae 的两种模式

Trae-Chat模式 随时对您的代码库或编程相关问题提问或寻求建议。这个不回给你直接创建文件等之类的你可以选择需要不需要去应用，适合一些基础的问题应用

Trae-Builder模式 轻松完成从零到一的项目构建。在 Builder 模式下，对代码文件的任何更改都会自动保存。这个模式下会自动根据你的需求创建一些资源文件，更适合需要它编写复杂的应用场景。

接下来咱们使用Trae-Builder模式让他帮咱们搞一个vue3 的工程如下：

安装依赖的时候报错了，但是任务并没有停止，或者说我可能最想要的是它能帮我解决报错。之后它又提示我重新运行了下npm install，原来是进错目录了！！

接着运行时提示node版本过低无法运行最新的vite,其实也一直在帮我解决问题。那么咱们接受它的意见继续往下走，可以厉害帮我解决了！！！

走到这里，咱们来总结下，第一次错误时进错文件目录执行npm install,然后紧接着帮我切换目录让我重新运行npm install。

第二次错误是电脑本机安装了node版本过低16.xx.xx,完事它给我们匹配了适合我node版本的vite版本。

正常没有使用Trae的时候，我可能真的会花点时间去解决问题。首先我们拿着错误提示去问问kimi看看它给我们什么样的参考建议：

可以看出其实KIMI 也给出参考建议说又node版本问题了，说让我切换nvm node 版本，假如我的本地没有nvm就需要继续去找解决方案。 Trae的优势就体现出来了！直接能提示你运行npm uninstall vite @vitejs/plugin-vue 接着提示你安装适合你的依赖 npm install vite@4 @vitejs/plugin-vue@4 --save-dev解决了遇到的问题。

咱们接着往下走，我让他帮我创建一个Login 界面看看他会怎么写：

如上它写好了并能支持运行，它帮我自动引入了router，我本来项目中是没有的！！！而且我检查了下它的代码写的也是蛮规范的如下：

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
import type { FormInstance, FormRules } from 'element-plus'

const router = useRouter()

interface LoginForm {
  username: string
  password: string
}

const loginForm = reactive<LoginForm>({
  username: '',
  password: ''
})

const loginFormRef = ref<FormInstance>()

const rules = reactive<FormRules>({
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    { min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' }
  ]
})

const handleLogin = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid) => {
    if (valid) {
      router.push('/home')
    }
  })
}
</script>

<template>
  <div class="login-container">
    <el-card class="login-card">
      <template #header>
        <h2>系统登录</h2>
      </template>
      <el-form
        ref="loginFormRef"
        :model="loginForm"
        :rules="rules"
        label-width="80px"
        class="login-form"
      >
        <el-form-item label="用户名" prop="username">
          <el-input v-model="loginForm.username" placeholder="请输入用户名" />
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input
            v-model="loginForm.password"
            type="password"
            placeholder="请输入密码"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleLogin(loginFormRef)">
            登录
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<style scoped>
.login-container {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f5f5f5;
}

.login-card {
  width: 480px;
}

.login-card :deep(.el-card__header) {
  text-align: center;
}

.login-form {
  padding: 20px;
}
</style>