一、准备工作

1. 下载 Qoder
   访问官网：https://qoder.com/，下载安装包。

2. 安装 Qoder
   安装过程按默认选项进行即可。

3. 启动并初始化项目目录
   安装完成后打开 Qoder，选择一个新建的空文件夹（例如命名为 translate）作为项目根目录。

---

二、开始开发

1. 向 Qoder 提出需求

在 Qoder 的对话框中输入以下指令：

我要创建一个翻译网站，请给出设计，使用 Spring AI Alibaba。

• 前端：Vue3 + Element Plus
• 后端：Java 17

Qoder 将自动分析需求并开始生成项目代码。

💡 提示：

• 界面中标注“2”的位置可切换 Token 使用方式，推荐选择“极致效果”模式以获得更高质量的代码。
• 生成过程中如有需要手动确认的操作（如文件覆盖），直接点击 “执行” 即可。

一两分钟代码就生成好了，如下图：

生成完了之后，你可以再让他检查下。 直接在对话框中写：检查整个项目，对有问题的进行修复。

---

3. 修复依赖问题（关键步骤）

生成的项目 pom.xml 中可能错误地引入了：

<dependency>
    <groupId>com.alibaba.cloud.ai</groupId>
    <artifactId>spring-ai-alibaba-qianwen-starter</artifactId>
</dependency>

但该 JAR 包不存在。正确应使用 DashScope（通义千问 API）对应的 Starter。

✅ 修正方法：

在对话框中告诉 Qoder：

请使用正确的阿里云 Spring AI Starter：spring-ai-alibaba-starter-dashscope。

或直接提供完整依赖：

<dependency>
    <groupId>com.alibaba.cloud.ai</groupId>
    <artifactId>spring-ai-alibaba-starter-dashscope</artifactId>
    <version>1.1.0.0</version>
</dependency>

然后让 Qoder 重新修复项目：

检查整个项目，对有问题的进行修复。

---

4. 启动后端（Java）

1. 确保 pom.xml 已修正依赖。
2. 在 IDE（如 IntelliJ IDEA）中导入 Maven 项目。
3. 配置 application.yml，填入 DashScope 的 API Key：

   spring:
     ai:
       alibaba:
         dashscope:
           api-key: your_dashscope_api_key_here
   

4. 运行主启动类（带 @SpringBootApplication 注解的类）。

🔥 如遇报错：直接将完整的错误日志粘贴给 Qoder，它会自动分析并修复代码。

---

5. 启动前端（Vue3）

1. 打开终端，进入前端目录：

   cd frontend
   

2. 安装依赖：

   npm install
   

3. 启动开发服务器：

   npm run dev
   

4. 浏览器访问 http://localhost:3000（或其他提示的地址），即可看到翻译网站首页。如下图：

---

6. 调整前端样式（可选）

如果对默认 UI 不满意，可直接向 Qoder 提出优化需求，例如：

将前端样式调整下，参考有道翻译的首页风格。

Qoder 会自动修改 Vue 组件和 CSS，生成更美观的界面。

---

7.其他

 如果还想丰富功能，可以继续使用自然语言与qorder交互。还有其他AI编程工具也可以，如：Cursor、Antigravity等。

三、小结

步骤	操作
准备	下载 Qoder → 新建 translate 文件夹
需求输入	明确技术栈（Vue3 + Java17 + Spring AI Alibaba）
依赖修正	使用 spring-ai-alibaba-starter-dashscope
后端启动	修复报错 + 配置 API Key
前端启动	npm install → npm run dev
样式优化	直接描述参考样式，Qoder 自动调整

✨ 优势：整个项目从零到可运行，仅需 1~2 分钟，极大提升开发效率！

---

📌 注意：确保已申请 DashScope API Key 并正确配置，否则调用大模型会失败。