搭建TraeVue3的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的基本流程。 ```
搭建TraeVue3的AI开发环境
brew -v Homebrew 4.1.0
搭建TraeVue3的AI开发环境
brew search node ==> Formulae node@18 node@22 node@20
搭建TraeVue3的AI开发环境
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.
搭建TraeVue3的AI开发环境
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"
搭建TraeVue3的AI开发环境
echo 'export PATH="/usr/local/opt/node@20/bin:$PATH"' >> /Users/yourmac/.bash_profile
搭建TraeVue3的AI开发环境
source ~/.bash_profile
搭建TraeVue3的AI开发环境
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 代码添加到对话中，然后需求提示词：添加一个贪吃蛇的小游戏。 贪吃蛇游戏源码，还是点击应用到工程中，经测试可以运行。 ```
