搭建Trae+Vue3的AI开发环境

大模型向量数据库容器

从2024年2025年,不断的有各种AI工具会在自媒体中火起来,号称各种效率王炸,而在AI是否会替代打工人的话题中,程序员又首当其冲。

作为一个后端开发,这篇文章基于Trae工具,来创建和运行一个简单的Vue前端应用。(下一篇试试Cursor)

Trae官网上这样简介:

是国内首个AI-IDE,深度理解中文开发场景。AI高度集成于IDE环境之中,为你带来比AI插件更加流畅、准确、优质的开发体验。

刷到的各种短视频中,都说AI编程工具可以让小白快速上手,只需要简单的输入几句中文指令即可,实际上可能作者本身就是程序员。

AI具备跨行业跨岗位的能力,不代表使用AI的人也能横跳。

身为后端研发,在Trae中跑完Vue3的入门应用,前后也花了大半天的时间,这还是建立在编程工具和环境搭建都轻车熟路的基础之上。

首先搭建Vue3的运行环境,通过相关文档可知,Vue3依赖Node.js的18.3版本或者更高,这里选择20的稳定版。

在Mac电脑中,使用brew工具安装NodeJS的基本流程。

  
# 1、查看brew版本  
brew -v  
Homebrew 4.1.0  
  
# 2、查询支持的node版本  
brew search node  
==> Formulae  
node@18          node@22        node@20    
  
# 3、选择安装node@20  
brew install node@20  
==> node@20  
node@20 is keg-only, which means it was not symlinked into /usr/local,  
because this is an alternate version of another formula.  
  
# 注意这里的环境配置  
If you need to have node@20 first in your PATH, run:  
echo'export PATH="/usr/local/opt/node@20/bin:$PATH"' >> /Users/yourmac/.bash\_profile  
  
For compilers to find node@20 you may need to set:  
export LDFLAGS="-L/usr/local/opt/node@20/lib"  
export CPPFLAGS="-I/usr/local/opt/node@20/include"  
  
# 4、添加配置,不同的电脑路径有差异,需要注意  
echo'export PATH="/usr/local/opt/node@20/bin:$PATH"' >> /Users/yourmac/.bash\_profile  
  
# 5、刷新配置  
source ~/.bash\_profile  
  
# 6、查看Node版本,安装成功  
node -v  
v20.19.0  

然后就是Trae开发工具,直接从官网下载默认的最新版本,安装到电脑本地。

启动Trae工具后,新建一个Demo工程,就是一个ai-code空文件夹,然后在Trae中打开。

picture.image

在对话框中输入开发需求,注意这里支持DeepSeek和豆包两款大模型,个人倾向选择最新的版本。

提示词:使用vue3框架,创建一个简单应用,可以参考官方案例。

picture.image

TraeAI大概把需求拆分了三步,没接触过前端,选择直接照做。

picture.image

第一步:创建项目,在路径/ai-code目录下面,然后执行初始化命令,直接点击图中的运行即可。

  
npm init vue@latest .  

注意下面的初始化日志,有两个地方需要自行输入。

  
ai-code % npm init vue@latest .  
  
> npx  
> create-vue .  
  
┌  Vue.js - The Progressive JavaScript Framework  
│  
◇  当前目录 非空,是否覆盖?  
│  Yes  ←【自行输入】  
│  
◇  请输入包名称:  
│  src  ←【自行输入】  
│  
◇  请选择要包含的功能: (↑/↓ 切换,空格选择,a  
全选,回车确认)  
│  none  
  
正在初始化项目 ./Desktop/document/ai-code...  
│  
└  项目初始化完成,可执行以下命令:  
  
   npm install  
   npm run dev  
  
| 可选:使用以下命令在项目目录中初始化 Git:  
     
   git init && git add -A && git commit -m "initial commit"  

初始化完成后,也可以直接执行第三步打包运行,服务是正常的。

第二步:Vue应用源码,包括一个简单的index.html主页,一个main.js脚本,还有就是App.vue源码,点击应用即可把AI生成的代码,添加到初始化的工程中。

  
<!-- main.js -->  
  
import { createApp } from 'vue'  
import App from './App.vue'  
  
createApp(App).mount('#app')  
  
<!-- App.vue -->  
<template>  
<div class="app">  
    <h1>{{ title }}</h1>  
    <p>点击次数: {{ count }}</p>  
    <button @click="increment">点击</button>  
</div>  
</template>  
  
<script setup>  
import { ref } from 'vue'  
  
const title = ref('Vue 3 示例应用')  
const count = ref(0)  
  
const increment = () => {  
  count.value++  
}  
</script>  
  
<style>  
.app {  
text-align: center;  
margin-top: 60px;  
}  
button {  
padding: 8px16px;  
background-color: #42b983;  
color: white;  
border: none;  
border-radius: 4px;  
cursor: pointer;  
}  
</style>  
  
<!-- index.html -->  
<!DOCTYPE html>  
<html lang="en">  
<head>  
<meta charset="UTF-8">  
<meta name="viewport" content="width=device-width, initial-scale=1.0">  
<title>Vue 3 示例</title>  
</head>  
<body>  
<div id="app"></div>  
<script type="module" src="/src/main.js"></script>  
</body>  
</html>  

第三步:安装依赖并运行项目的命令。

  
npm install  
npm run dev  

这里可以看下启动日志,有服务的端口号,实际上与后端服务启动的原理相似。

  
ai-code % npm install  
npm run dev  
  
added 143 packages, and audited 144 packages in 24s  
  
42 packages are looking for funding  
  run `npm fund` for details  
  
found 0 vulnerabilities  
  
ai-code % npm run dev  
  
> src@0.0.0 dev  
> vite  
  
  
  VITE v6.2.5  ready in 842 ms  
  
  ➜  Local:   http://localhost:5173/  
  ➜  Network: use --host to expose  
  ➜  Vue DevTools: Open http://localhost:5173/\_\_devtools\_\_/ as a separate window  
  ➜  Vue DevTools: Press Option(⌥)+Shift(⇧)+D in App to toggle the Vue DevTools  
  ➜  press h + enter to show help  

可以在Trae工具中预览,也可以在浏览器里直接访问,在命令行中按 Ctrl + C即可退出服务。

picture.image

这样一个初步的入门案例就完成了,下面再尝试指定源码位置修改。

选中index.html代码添加到对话中,然后需求提示词:添加一个贪吃蛇的小游戏。

picture.image

贪吃蛇游戏源码,还是点击应用到工程中,经测试可以运行。

picture.image

  
<!DOCTYPE html>  
<html lang="en">  
<head>  
<meta charset="UTF-8">  
<meta name="viewport" content="width=device-width, initial-scale=1.0">  
<title>Vue 3 示例</title>  
<style>  
    #game-container {  
      display: flex;  
      flex-direction: column;  
      align-items: center;  
      margin-top: 20px;  
    }  
    canvas {  
      border: 1px solid #000;  
    }  
    .score {  
      margin-bottom: 10px;  
      font-size: 20px;  
    }  
  </style>  
</head>  
<body>  
<div id="app"></div>  
<div id="game-container">  
    <div class="score">分数: <span id="score">0</span></div>  
    <canvas id="game" width="400" height="400"></canvas>  
</div>  
  
<script type="module" src="/src/main.js"></script>  
<script>  
    // 贪吃蛇游戏逻辑  
    const canvas = document.getElementById('game');  
    const ctx = canvas.getContext('2d');  
    const scoreElement = document.getElementById('score');  
      
    const gridSize = 20;  
    const tileCount = canvas.width / gridSize;  
      
    let snake = [{x: 10, y: 10}];  
    let food = {x: 5, y: 5};  
    let direction = {x: 0, y: 0};  
    let score = 0;  
    let gameSpeed = 100;  
    let gameLoop;  
      
    function drawGame() {  
      // 清空画布  
      ctx.fillStyle = 'white';  
      ctx.fillRect(0, 0, canvas.width, canvas.height);  
        
      // 绘制蛇  
      ctx.fillStyle = 'green';  
      snake.forEach(segment => {  
        ctx.fillRect(segment.x * gridSize, segment.y * gridSize, gridSize, gridSize);  
      });  
        
      // 绘制食物  
      ctx.fillStyle = 'red';  
      ctx.fillRect(food.x * gridSize, food.y * gridSize, gridSize, gridSize);  
    }  
      
    function updateGame() {  
      // 移动蛇  
      const head = {x: snake[0].x + direction.x, y: snake[0].y + direction.y};  
      snake.unshift(head);  
        
      // 检查是否吃到食物  
      if (head.x === food.x && head.y === food.y) {  
        score++;  
        scoreElement.textContent = score;  
        placeFood();  
      } else {  
        snake.pop();  
      }  
        
      // 检查碰撞  
      if (  
        head.x < 0 || head.x >= tileCount ||   
        head.y < 0 || head.y >= tileCount ||  
        snake.slice(1).some(segment => segment.x === head.x && segment.y === head.y)  
      ) {  
        clearInterval(gameLoop);  
        alert('游戏结束! 分数: ' + score);  
        resetGame();  
      }  
    }  
      
    function placeFood() {  
      food = {  
        x: Math.floor(Math.random() * tileCount),  
        y: Math.floor(Math.random() * tileCount)  
      };  
        
      // 确保食物不会出现在蛇身上  
      while (snake.some(segment => segment.x === food.x && segment.y === food.y)) {  
        food = {  
          x: Math.floor(Math.random() * tileCount),  
          y: Math.floor(Math.random() * tileCount)  
        };  
      }  
    }  
      
    function resetGame() {  
      snake = [{x: 10, y: 10}];  
      direction = {x: 0, y: 0};  
      score = 0;  
      scoreElement.textContent = score;  
      placeFood();  
      gameLoop = setInterval(() => {  
        updateGame();  
        drawGame();  
      }, gameSpeed);  
    }  
      
    // 键盘控制  
    document.addEventListener('keydown', e => {  
      switch(e.key) {  
        case'ArrowUp':  
          if (direction.y === 0) direction = {x: 0, y: -1};  
          break;  
        case'ArrowDown':  
          if (direction.y === 0) direction = {x: 0, y: 1};  
          break;  
        case'ArrowLeft':  
          if (direction.x === 0) direction = {x: -1, y: 0};  
          break;  
        case'ArrowRight':  
          if (direction.x === 0) direction = {x: 1, y: 0};  
          break;  
      }  
    });  
      
    // 开始游戏  
    resetGame();  
  </script>  
</body>  
</html>  

虽然游戏可以正常运行,但是移动速度太快不好操控,继续使用提示词修改:蛇的速度太快,把移速降低一半。

源码定位和修改都是正确的,但是把gameSpeed变量丢了,打工人这么写没问题,但是AI这么写必须吐槽一句:不够智能。

picture.image

最后客观的总结一句:在AI的加持下,可以高效的实现很多简单需求的编程,但是要说小白也可以轻松上手,显然也不现实。

所谓AI原生的IDE开发工具,其核心能力还是看底层的大模型,如果不够智能,输出的编码漏洞百出,根本起不到提升效率的作用。

从五花八门的AI应用体验来看,模型即产品。

0
0
0
0
关于作者
关于作者

文章

0

获赞

0

收藏

0

相关资源
火山引擎大规模机器学习平台架构设计与应用实践
围绕数据加速、模型分布式训练框架建设、大规模异构集群调度、模型开发过程标准化等AI工程化实践,全面分享如何以开发者的极致体验为核心,进行机器学习平台的设计与实现。
相关产品
评论
未登录
看完啦,登录分享一下感受吧~
暂无评论