搭建Trae+Vue3的AI開發(fā)環(huán)境
從2024年2025年，不斷的有各種AI工具會在自媒體中火起來，號稱各種效率王炸，而在AI是否會替代打工人的話題中，程序員又首當(dāng)其沖。
從2024年2025年，不斷的有各種AI工具會在自媒體中火起來，號稱各種效率王炸，而在AI是否會替代打工人的話題中，程序員又首當(dāng)其沖。
作為一個后端開發(fā)，這篇文章基于Trae工具，來創(chuàng)建和運(yùn)行一個簡單的Vue前端應(yīng)用。（下一篇試試Cursor）
Trae官網(wǎng)上這樣簡介：
是國內(nèi)首個AI-IDE，深度理解中文開發(fā)場景。AI高度集成于IDE環(huán)境之中，為你帶來比AI插件更加流暢、準(zhǔn)確、優(yōu)質(zhì)的開發(fā)體驗。
刷到的各種短視頻中，都說AI編程工具可以讓小白快速上手，只需要簡單的輸入幾句中文指令即可，實際上可能作者本身就是程序員。
AI具備跨行業(yè)跨崗位的能力，不代表使用AI的人也能橫跳。
身為后端研發(fā)，在Trae中跑完Vue3的入門應(yīng)用，前后也花了大半天的時間，這還是建立在編程工具和環(huán)境搭建都輕車熟路的基礎(chǔ)之上。
首先搭建Vue3的運(yùn)行環(huán)境，通過相關(guān)文檔可知，Vue3依賴Node.js的18.3版本或者更高，這里選擇20的穩(wěn)定版。
在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.
# 注意這里的環(huán)境配置
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開發(fā)工具，直接從官網(wǎng)下載默認(rèn)的最新版本，安裝到電腦本地。
啟動Trae工具后，新建一個Demo工程，就是一個ai-code空文件夾，然后在Trae中打開。
在對話框中輸入開發(fā)需求，注意這里支持DeepSeek和豆包兩款大模型，個人傾向選擇最新的版本。
提示詞：使用vue3框架，創(chuàng)建一個簡單應(yīng)用，可以參考官方案例。
TraeAI大概把需求拆分了三步，沒接觸過前端，選擇直接照做。
第一步：創(chuàng)建項目，在路徑/ai-code目錄下面，然后執(zhí)行初始化命令，直接點(diǎn)擊圖中的運(yùn)行即可。
npm init vue@latest .
注意下面的初始化日志，有兩個地方需要自行輸入。
ai-code % npm init vue@latest .
> npx
> create-vue .
┌ Vue.js - The Progressive JavaScript Framework
│
◇ 當(dāng)前目錄 非空，是否覆蓋？
│ Yes ←【自行輸入】
│
◇ 請輸入包名稱：
│ src ←【自行輸入】
│
◇ 請選擇要包含的功能： (↑/↓ 切換，空格選擇，a
全選，回車確認(rèn))
│ none
正在初始化項目 ./Desktop/document/ai-code...
│
└ 項目初始化完成，可執(zhí)行以下命令：
npm install
npm run dev
| 可選：使用以下命令在項目目錄中初始化 Git：
git init && git add -A && git commit -m "initial commit"
初始化完成后，也可以直接執(zhí)行第三步打包運(yùn)行，服務(wù)是正常的。
第二步：Vue應(yīng)用源碼，包括一個簡單的index.html主頁，一個main.js腳本，還有就是App.vue源碼，點(diǎn)擊應(yīng)用即可把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>點(diǎn)擊次數(shù): {{ count }}</p>
<button @click="increment">點(diǎn)擊</button>
</div>
</template>
<script setup>
import { ref } from 'vue'
const title = ref('Vue 3 示例應(yīng)用')
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>
第三步：安裝依賴并運(yùn)行項目的命令。
npm install
npm run dev
這里可以看下啟動日志，有服務(wù)的端口號，實際上與后端服務(wù)啟動的原理相似。
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工具中預(yù)覽，也可以在瀏覽器里直接訪問，在命令行中按 Ctrl + C即可退出服務(wù)。
這樣一個初步的入門案例就完成了，下面再嘗試指定源碼位置修改。
選中index.html代碼添加到對話中，然后需求提示詞：添加一個貪吃蛇的小游戲。
貪吃蛇游戲源碼，還是點(diǎn)擊應(yīng)用到工程中，經(jīng)測試可以運(yùn)行。
<!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">分?jǐn)?shù): <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('游戲結(jié)束! 分?jǐn)?shù): ' + score);
resetGame();
}
}
function placeFood() {
food = {
x: Math.floor(Math.random() * tileCount),
y: Math.floor(Math.random() * tileCount)
};
// 確保食物不會出現(xiàn)在蛇身上
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>
雖然游戲可以正常運(yùn)行，但是移動速度太快不好操控，繼續(xù)使用提示詞修改：蛇的速度太快，把移速降低一半。
源碼定位和修改都是正確的，但是把gameSpeed變量丟了，打工人這么寫沒問題，但是AI這么寫必須吐槽一句：不夠智能。
最后客觀的總結(jié)一句：在AI的加持下，可以高效的實現(xiàn)很多簡單需求的編程，但是要說小白也可以輕松上手，顯然也不現(xiàn)實。
所謂AI原生的IDE開發(fā)工具，其核心能力還是看底層的大模型，如果不夠智能，輸出的編碼漏洞百出，根本起不到提升效率的作用。
從五花八門的AI應(yīng)用體驗來看，模型即產(chǎn)品。
浙公網(wǎng)安備 33010602011771號