搭建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中打开。
在对话框中输入开发需求，注意这里支持DeepSeek和豆包两款大模型，个人倾向选择最新的版本。
提示词：使用vue3框架，创建一个简单应用，可以参考官方案例。
TraeAI大概把需求拆分了三步，没接触过前端，选择直接照做。
第一步：创建项目，在路径/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: 8px 16px;
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即可退出服务。
这样一个初步的入门案例就完成了，下面再尝试指定源码位置修改。
选中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>
<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这么写必须吐槽一句：不够智能。
最后客观的总结一句：在AI的加持下，可以高效的实现很多简单需求的编程，但是要说小白也可以轻松上手，显然也不现实。
所谓AI原生的IDE开发工具，其核心能力还是看底层的大模型，如果不够智能，输出的编码漏洞百出，根本起不到提升效率的作用。
从五花八门的AI应用体验来看，模型即产品。
搭建Trae+Vue3的AI开发环境的更多相关文章
- 利用grunt-contrib-connect和grunt-connect-proxy搭建前后端分离的开发环境
前后端分离这个词一点都不新鲜,完全的前后端分离在岗位协作方面,前端不写任何后台,后台不写任何页面,双方通过接口传递数据完成软件的各个功能实现.此种情况下,前后端的项目都独立开发和独立部署,在开发期间有 ...
- 【前端福利】用grunt搭建自动化的web前端开发环境-完整教程
jQuery在使用grunt,bootstrap在使用grunt,百度UEditor在使用grunt,你没有理由不学.不用! 1. 前言 各位web前端开发人员,如果你现在还不知道grunt或者听说过 ...
- 转：【前端福利】用grunt搭建自动化的web前端开发环境-完整教程
原文地址:http://blog.csdn.net/wangfupeng1988/article/details/46418203 jQuery在使用grunt,bootstrap在使用grunt,百 ...
- Android开发学习总结(一)——搭建最新版本的Android开发环境
Android开发学习总结(一)——搭建最新版本的Android开发环境(转) 最近由于工作中要负责开发一款Android的App,之前都是做JavaWeb的开发,Android开发虽然有所了解,但是 ...
- 用grunt搭建自动化的web前端开发环境实战教程(详细步骤)
用grunt搭建自动化的web前端开发环境实战教程(详细步骤) jQuery在使用grunt,bootstrap在使用grunt,百度UEditor在使用grunt,你没有理由不学.不用!前端自动化, ...
- 搭建Eclipse、Resin Web开发环境
搭建Eclipse.Resin Web开发环境 一.当然是安装java开发环境 参看: Java环境的搭建 http://www.cnblogs.com/ghj1976/archive/2010/04 ...
- 用grunt搭建自动化的web前端开发环境-完整教程
原稿:http://www.cnblogs.com/wangfupeng1988/p/4561993.html#!comments jQuery在使用grunt,bootstrap在使用grunt,百 ...
- 图文详解如何搭建Windows的Android C++开发环境
原地址:http://www.apkbus.com/android-18595-1-1.html //================================================= ...
- EditPlus+MinGW搭建简易的C/C++开发环境
EditPlus+MinGW搭建简易的C/C++开发环境 有时候想用C编点小程序,但是每次都要启动那难用又难看的VC实在是不情愿,而且老是会生成很多没用的中间文件,很讨厌,后来看到网上有很多人用Edi ...
- linux-mint下搭建android,angularjs,rails,html5开发环境 - qijie29896的个人空间 - 开源中国社区
linux-mint下搭建android,angularjs,rails,html5开发环境 - qijie29896的个人空间 - 开源中国社区 http://blog.csdn.net/orzor ...
随机推荐
- Flume架构与源码分析-整体架构
最近在学习Flume源码,所以想写一份Flume源码学习的笔记供需要的朋友一起学习参考. 1.Flume介绍 Flume是cloudera公司开源的一款分布式.可靠地进行大量日志数据采集.聚合和并转移 ...
- Ping测试记录脚本
@echo off echo PingTest del PingTest_result.txt timeout /t 10 echo=> PingTest_result.txt :TEST ec ...
- vue-element-template改为从后台获取菜单
一.后端接口获取菜单信息 1.返回数据样式 { "code": 20000, "data": [{ "menuId": "2000 ...
- Luogu P9055 [集训队互测 2021] 数列重排 题解 [ 紫 ] [ 构造 ] [ 数学 ]
数列重排:差点就场切的神仙构造,最后一步想假了,导致我模拟赛荣获 25+5+0 的好成绩! 这题部分分很有启发性,跟着一步一步打基本能想到正解的构造,但也有可能想偏部分分的意思,想假策略. 构造 先看 ...
- 如何正确配置 .gitignore 以忽略特定文件夹下的文件（除指定子文件夹外）
在使用 Git 进行版本控制时,.gitignore 文件是一个非常有用的工具,可以帮助我们忽略不需要跟踪的文件或文件夹.然而,有时我们需要忽略某个文件夹下的所有内容,但保留其中的某个子文件夹.本文将 ...
- Johnson 全源负权最短路径算法详解
Floyd-Warshall算法可以求解出图内任意两点的最短路径,适用于稠密图,但时间复杂度为 \(O(n³)\):Dijkstra算法求解单源最短路径的时间复杂度为 \(O(m + n log n) ...
- Winform UI线程和处理线程交互（进度更新显示）
在界面开发过程中,会遇到耗时较长的处理过程,一般会将耗时较长的处理放到单独的线程中.然后在界面显示处理进度信息. 实现改效果的两种方式记录: 1. 使用委托: //定义委托,在线程中使用 privat ...
- DeepSeek满血版测试
技术背景 很多厂商以次充好,用蒸馏版DeepSeek冒充满血版.本文提供一些收集的问题集,可以用于测试是否满血DeepSeek.经过实际测试,国内厂商中只有满血版DeepSeek可以全对.但是各厂商后 ...
- 什么是git，什么是github，git和github的使用
Git实战 注意:本项目是学习笔记,来自于哔哩哔哩武沛齐老师的Git实战视频, 网址:[武沛齐老师讲git,看完绝对上瘾!!!] https://www.bilibili.com/video/BV1n ...
- win7系统清理C盘空间方法实测
问题描述:win7电脑C盘容易满,采用如下方法清理 方法一:win+r,输入%temp%查看临时文件,手动删除不需要的文件 方法二:减小休眠文件:如果你很少使用休眠模式,可以通过win+r输入cmd命 ...