“一个人两个月从零到一上线一个完整网站”——这在过去听起来像是资深全栈工程师的专属成就。但今天我想分享一个完全不同的故事一个非科班出身的开发者如何借助AI编程助手在两个月内独立完成了从前端到后端、从数据库到部署的整个网站开发流程。这不是一个关于“AI取代程序员”的耸人听闻而是一个关于“AI如何成为开发者的超级副驾”的务实记录。如果你也曾有过“想做个自己的项目但不知从何下手”的迷茫或者被“前端Vue、后端Spring Boot、数据库、服务器部署”这一连串名词吓退那么这篇文章正是为你准备的。我将详细拆解这60天里我是如何将AI特别是Claude Code和ChatGPT从一个“问答机”变成真正的“开发伙伴”一步步构建起一个基于Vue 3 Spring Boot 3的现代化网站。更重要的是我会分享那些“踩坑”经验——AI并非万能它给出的代码可能过时、可能有依赖冲突甚至逻辑错误。如何高效提问、如何验证代码、如何让AI理解你的项目上下文这些实战技巧才是本文的核心价值。1. 重新定义“从零到一”AI时代个人开发者的新可能在传统认知里“从零到一”做一个网站意味着你需要掌握HTML/CSS/JavaScript、至少一门后端语言如Java/Python、数据库设计、API接口规范、服务器运维、域名解析等一系列技能。学习曲线陡峭挫败感频繁。但AI编程助手的出现正在悄然改变这个游戏规则。它解决的并非“创造”问题而是“认知负荷”和“信息检索”问题。对于一个有基本逻辑思维但缺乏系统训练的人来说最大的障碍往往不是“想不到”而是“不知道用什么技术”、“不知道语法怎么写”、“不知道错误如何排查”。我的核心判断是AI如Claude Code、ChatGPT在当前阶段最适合的角色是“高级技术顾问实时代码生成器”。它能够降低入门门槛将自然语言描述转化为可运行的代码框架。加速知识获取快速解答特定技术问题提供最佳实践示例。辅助调试排错根据错误信息提供可能的解决方案和排查思路。我选择的技术栈也颇具代表性反映了当前中小型项目的主流选择前端Vue 3 Composition API TypeScript。Vue 3的响应式系统和组合式API更符合直觉TypeScript能提供更好的类型安全这两者都能与AI形成良好互动AI对类型明确的代码生成更准确。后端Spring Boot 3 Java 17。Spring Boot的“约定大于配置”和强大的生态让后端API开发变得高效。Spring Boot 3对Java 17的支持也意味着更现代的语法和性能。AI工具Claude Code深度集成在VSCode中和 ChatGPT用于复杂逻辑讨论和方案设计。两者互补Claude Code擅长上下文感知的代码补全和文件操作ChatGPT擅长解释概念和提供多种方案选择。这个组合使得“单人全栈”的可行性大大增加。接下来我将从最实际的“环境搭建”开始带你走一遍我的开发之路。2. 环境准备打造你的AI增强型开发工作流工欲善其事必先利其器。在开始写第一行代码之前一个稳定、高效的开发环境至关重要。这里不仅包括软件安装更重要的是如何配置AI工具让它能深度理解你的项目。2.1 基础开发环境操作系统Windows 10/11 macOS 或 Linux均可。本文以Windows为例命令会有相应说明。Node.js与npm用于前端Vue开发。建议安装Node.js 18 LTS或更高版本。# 检查安装是否成功 node --version npm --versionJava开发套件 (JDK)用于后端Spring Boot开发。必须安装JDK 17或JDK 21Spring Boot 3要求至少JDK 17。# 检查安装是否成功 java --version推荐使用 Amazon Corretto 或 OpenJDK 安装后记得配置JAVA_HOME环境变量。开发工具 (IDE)Visual Studio Code (VSCode)用于前端开发和整个项目管理。轻量、插件生态丰富是集成Claude Code的最佳选择。IntelliJ IDEA Community Edition用于后端Java开发。它对Spring Boot的支持是无与伦比的智能提示、运行调试都非常方便。你也可以只用VSCode配合Java插件完成全部开发但IDEA在Java生态上的体验更优。2.2 AI助手配置与选择核心环节这是与传统开发流程最大的不同点。你需要让AI成为你工作流的一部分。1. Claude Code你的项目级代码助手Claude Code是Anthropic公司推出的代码助手它能直接读取你打开的文件和项目结构提供基于上下文的代码建议、解释和生成。它不像ChatGPT那样需要你不断粘贴代码。安装在VSCode的扩展商店中搜索“Claude Code”并安装。获取与配置安装后你需要一个Claude API密钥。通常需要注册Anthropic的开发者账户获取。在VSCode中按下Cmd/Ctrl Shift P输入“Claude Code: Set API Key”进行配置。关键技巧打开项目文件夹务必使用VSCode“打开文件夹”功能让Claude Code能感知整个项目结构。使用“解释代码”功能选中一段复杂的代码右键选择“Claude Code: Explain Code”它能帮你快速理解第三方库或遗留代码。使用“生成测试”功能右键点击Java方法或Vue组件可以快速生成单元测试框架。2. ChatGPT你的架构师与问题解决专家ChatGPT这里泛指OpenAI的ChatGPT或类似的大语言模型Web界面更适合进行开放性的讨论、方案设计、学习概念和解决Claude Code无法处理的复杂逻辑问题。使用策略用于学习“请用通俗易懂的方式解释一下Vue 3的ref和reactive有什么区别并各举一个例子。”用于设计“我想设计一个用户登录模块后端用Spring Boot前端用Vue 3请给出一个详细的API接口设计和前后端数据流转的步骤。”用于排错将完整的错误日志粘贴给它并描述你之前尝试过的操作。切记不要盲目相信它给出的第一个方案要理解其原理后再尝试。重要提醒网络上有大量关于“免费使用”、“接入”等不实信息。请务必通过官方或正规渠道获取和使用这些AI服务遵守相关法律法规和服务条款。开发的核心是你的逻辑和创造力AI只是工具。3. 项目初始化让AI帮你搭建脚手架有了环境我们开始创建项目。传统方式需要记忆大量命令行参数现在我们可以用AI来引导。3.1 创建Vue 3前端项目在VSCode中打开一个空文件夹作为项目根目录。打开VSCode的终端Terminal。传统命令你需要知道npm create vuelatest这个命令并在交互式命令行中选择TypeScript、Router等选项。AI辅助流程你可以直接问Claude Code在VSCode的Chat面板“请帮我初始化一个Vue 3项目使用TypeScript和Vue Router。”Claude Code很可能会给出正确的命令并解释每个选项的含义。执行它生成的命令npm create vuelatest my-website-frontend根据命令行提示选择你需要的特性推荐TypeScript, Vue Router, Pinia状态管理 ESLint。进入项目并安装依赖cd my-website-frontend npm install启动开发服务器验证npm run dev访问http://localhost:5173看到Vue欢迎页面即成功。3.2 创建Spring Boot 3后端项目这里使用Spring官方提供的 Spring Initializr 是最佳实践但AI可以帮你快速确定依赖。打开Spring Initializr网站。向ChatGPT提问“我要创建一个Spring Boot 3项目实现RESTful API连接MySQL数据库需要JWT认证。请列出在Spring Initializr上需要选择的依赖。”ChatGPT会返回类似清单Spring Web,Spring Data JPA,MySQL Driver,Lombok,Spring Security等。根据这个清单在Spring Initializr页面选择Project: MavenLanguage: JavaSpring Boot: 3.x.x (最新稳定版)Dependencies: 勾选Web, Data JPA, MySQL Driver, Lombok。JWT和Security配置稍复杂初期可先不加后续手动引入。点击“Generate”下载项目压缩包解压后用IntelliJ IDEA打开。在IDEA中打开pom.xml文件你可以让Claude Code如果IDEA有插件或ChatGPT帮你检查依赖版本是否兼容或者添加其他依赖。!-- 一个示例性的pom.xml依赖部分 -- dependencies dependency groupIdorg.springframework.boot/groupId artifactIdspring-boot-starter-web/artifactId /dependency dependency groupIdorg.springframework.boot/groupId artifactIdspring-boot-starter-data-jpa/artifactId /dependency dependency groupIdcom.mysql/groupId artifactIdmysql-connector-j/artifactId scoperuntime/scope /dependency dependency groupIdorg.projectlombok/groupId artifactIdlombok/artifactId optionaltrue/optional /dependency dependency groupIdorg.springframework.boot/groupId artifactIdspring-boot-starter-test/artifactId scopetest/scope /dependency /dependencies尝试运行主类通常是*Application.java确保Spring Boot能正常启动。至此前后端项目骨架已搭建完毕。你的项目结构大致如下my-website/ ├── frontend/ # Vue 3项目 └── backend/ # Spring Boot项目4. 核心开发流程拆解与AI协同编码的真实场景接下来进入具体的功能开发。我以构建一个简单的“文章管理系统”为例包含文章列表展示、创建和编辑功能。4.1 阶段一数据库设计与实体类创建后端目标创建Article实体对应数据库中的articles表。传统痛点需要记忆JPA注解的语法和属性思考字段类型是否合适。AI辅助实践描述需求在IDEA中我可以对Claude Code说“创建一个JPA实体类Article包含id主键自增、title字符串、content长文本、author字符串、createTime创建时间和updateTime更新时间字段。”生成代码Claude Code会生成一个基本可用的实体类。审查与修正这是关键一步AI生成的代码可能不完美。我需要检查Id和GeneratedValue策略是否正确。时间字段用的是LocalDateTime还是Date我更喜欢LocalDateTime。是否使用了CreationTimestamp和UpdateTimestamp需要Hibernate额外依赖来自动管理时间或者让AI修改为在PrePersist和PreUpdate方法中设置时间。是否添加了无参构造器、全参构造器Lombok的AllArgsConstructor、equals和hashCode方法通常用Lombok的Data注解即可。最终代码示例(backend/src/main/java/com/example/website/entity/Article.java)package com.example.website.entity; import jakarta.persistence.*; import lombok.Data; import java.time.LocalDateTime; Entity Data Table(name articles) public class Article { Id GeneratedValue(strategy GenerationType.IDENTITY) private Long id; Column(nullable false) private String title; Column(columnDefinition TEXT) private String content; private String author; Column(name create_time, updatable false) private LocalDateTime createTime; Column(name update_time) private LocalDateTime updateTime; PrePersist protected void onCreate() { createTime LocalDateTime.now(); updateTime LocalDateTime.now(); } PreUpdate protected void onUpdate() { updateTime LocalDateTime.now(); } }向AI提问的技巧当你对生成的代码不满意时可以进一步指定“请用Lombok的Data注解简化这个实体类并用LocalDateTime类型同时在PrePersist和PreUpdate方法中自动设置时间。” 指令越具体结果越好。4.2 阶段二Repository与Service层后端目标创建数据访问层和业务逻辑层。创建Repository这很简单AI可以完美胜任。// 对AI说创建ArticleRepository接口继承JpaRepository package com.example.website.repository; import com.example.website.entity.Article; import org.springframework.data.jpa.repository.JpaRepository; public interface ArticleRepository extends JpaRepositoryArticle, Long { }创建Service这里需要一些业务逻辑。例如在创建文章时我们想检查标题是否重复。向AI描述“创建一个ArticleService类包含findAll、findById、saveArticle和deleteById方法。在saveArticle方法中如果文章id为空则是新增需要检查标题是否已存在忽略大小写如果已存在则抛出异常如果id不为空则是更新。”AI会生成一个包含基础CRUD和校验逻辑的Service。你需要仔细检查其逻辑是否正确特别是异常处理部分。最终代码示例(backend/src/main/java/com/example/website/service/ArticleService.java) 片段Service RequiredArgsConstructor public class ArticleService { private final ArticleRepository articleRepository; public ListArticle findAll() { return articleRepository.findAll(); } public Article saveArticle(Article article) { // 新增时检查标题重复 if (article.getId() null) { OptionalArticle existing articleRepository.findByTitleIgnoreCase(article.getTitle()); if (existing.isPresent()) { throw new RuntimeException(文章标题已存在); } } // 更新时时间已在Entity的PreUpdate中处理 return articleRepository.save(article); } // ... 其他方法 }注意这里findByTitleIgnoreCase方法需要在ArticleRepository中声明。你可以让AI帮你添加这个接口方法。4.3 阶段三RESTful API控制器后端目标创建ArticleController提供/api/articles相关的HTTP接口。AI辅助直接要求AI“创建一个Spring Boot的REST控制器ArticleController注入ArticleService实现获取所有文章、根据ID获取文章、创建文章、更新文章和删除文章的接口。使用标准的HTTP状态码和ResponseEntity返回结果。”AI会生成一个结构清晰的Controller。你需要关注URL路径设计是否合理如RequestMapping(/api/articles)。是否使用了RestController。方法的注解是否正确GetMapping,PostMapping,PutMapping,DeleteMapping。异常是否被全局处理器捕获并返回友好的错误信息这部分可以后续让AI帮你创建GlobalExceptionHandler。4.4 阶段四前端页面与组件Vue 3目标创建文章列表页和文章编辑表单。这是AI大显身手的地方尤其是生成UI模板和基础逻辑。创建文章列表组件(frontend/src/views/ArticleListView.vue)向AI描述“用Vue 3的script setup语法和TypeScript创建一个文章列表组件。使用Element Plus的表格组件显示文章的ID、标题、作者和创建时间。表格上方有一个‘新建文章’按钮点击后跳转到编辑页。表格行有‘编辑’和‘删除’操作按钮。需要从/api/articles接口获取数据。”AI会生成包含模板、脚本和样式的完整组件。它会自动导入axios或fetch并编写onMounted生命周期钩子来获取数据。你需要做的是安装并配置Element Plusnpm install element-plus并在main.ts中引入。检查API调用路径是否正确因为前端和后端可能运行在不同端口涉及跨域。将“删除”按钮的点击事件逻辑补充完整调用删除API并刷新列表。创建文章编辑组件(frontend/src/views/ArticleEditView.vue)描述“创建一个文章编辑组件包含标题输入框、作者输入框、内容富文本编辑器或textarea的表单。有‘提交’和‘取消’按钮。如果是编辑现有文章页面加载时需要根据路由中的ID获取文章数据并填充表单如果是新建表单为空。提交时根据有无ID决定调用创建或更新API。”AI会生成一个基础表单。你可能需要引入一个富文本编辑器组件如wangeditor/editor并让AI帮你集成。处理路由参数使用Vue Router的useRoute。处理表单验证可以引入vee-validate或使用Element Plus的Form验证规则。关键点AI生成的Vue代码质量很高但它不知道你项目的具体配置如API基地址baseURL、使用的UI库版本。你需要将这些上下文信息告诉它或者在生成后手动调整。4.5 阶段五前后端联调与跨域问题这是第一个真正的“坑”。前端运行在localhost:5173后端运行在localhost:8080浏览器出于安全考虑会阻止跨域请求。传统解决需要手动在后端配置CORS。AI辅助解决将完整的错误信息如“Access-Control-Allow-Origin” missing抛给ChatGPT“我的Spring Boot 3后端运行在8080端口Vue前端运行在5173端口前端调用API时出现CORS错误。请给我一个Spring Boot 3中全局配置CORS的解决方案。”ChatGPT会给出几种方案最常见的是创建一个WebMvcConfigurer的配置类。代码示例(backend/src/main/java/com/example/website/config/WebConfig.java)Configuration public class WebConfig implements WebMvcConfigurer { Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping(/api/**) // 允许跨域的路径 .allowedOrigins(http://localhost:5173) // 允许的前端地址 .allowedMethods(GET, POST, PUT, DELETE, OPTIONS) // 允许的方法 .allowedHeaders(*) .allowCredentials(true); } }配置好后重启后端跨域问题即可解决。这个过程中AI帮你快速找到了标准解决方案省去了大量搜索时间。5. 部署上线从本地开发到公网可访问开发完成只是第一步让网站能在互联网上被访问是另一个挑战。我选择了最经典、成本也较低的方案云服务器 Docker Nginx。5.1 准备云服务器与域名购买云服务器选择一家主流云服务商购买一台最低配置的Linux服务器如CentOS 7.9或Ubuntu 22.04。记住服务器的公网IP。购买并解析域名可选但推荐购买一个域名并在域名管理后台添加一条A记录将域名指向你的服务器公网IP。5.2 编写Dockerfile与Docker Compose使用Docker可以保证环境一致性简化部署。你需要为前端和后端分别编写Dockerfile。1. 后端Dockerfile(backend/Dockerfile)# 使用官方Java 17基础镜像 FROM openjdk:17-jdk-slim # 设置工作目录 WORKDIR /app # 将Maven构建好的jar包复制到容器中 COPY target/*.jar app.jar # 暴露端口 EXPOSE 8080 # 启动应用 ENTRYPOINT [java, -jar, app.jar]如何生成target/*.jar在backend目录下执行mvn clean packageIDEA中也可以直接操作。2. 前端Dockerfile(frontend/Dockerfile)# 构建阶段 FROM node:18-alpine as build WORKDIR /app COPY package*.json ./ RUN npm install COPY . . RUN npm run build # 生产环境阶段 FROM nginx:alpine COPY --frombuild /app/dist /usr/share/nginx/html EXPOSE 80 CMD [nginx, -g, daemon off;]3. Docker Compose编排(docker-compose.yml在项目根目录) 为了让数据库、后端、前端一起启动使用Docker Compose非常方便。version: 3.8 services: mysql: image: mysql:8 container_name: website-mysql environment: MYSQL_ROOT_PASSWORD: your_strong_password MYSQL_DATABASE: website_db volumes: - mysql_data:/var/lib/mysql ports: - 3306:3306 networks: - app-network backend: build: ./backend container_name: website-backend depends_on: - mysql environment: SPRING_DATASOURCE_URL: jdbc:mysql://mysql:3306/website_db?useSSLfalseserverTimezoneUTC SPRING_DATASOURCE_USERNAME: root SPRING_DATASOURCE_PASSWORD: your_strong_password ports: - 8080:8080 networks: - app-network frontend: build: ./frontend container_name: website-frontend depends_on: - backend ports: - 80:80 networks: - app-network volumes: mysql_data: networks: app-network: driver: bridge这个docker-compose.yml文件定义了三个服务MySQL数据库、Spring Boot后端和Nginx前端。它们通过自定义网络app-network互联。后端通过服务名mysql访问数据库前端通过backend访问后端API。AI在这里的作用当你对Docker语法不熟悉时可以直接将你的需求描述给AI“我有一个Spring Boot应用打包成jar一个Vue应用构建成静态文件一个MySQL数据库。请帮我写一个docker-compose.yml文件把这三个服务编排起来并设置好网络和依赖。” AI能生成一个几乎可用的初稿你只需修改密码、端口和路径即可。5.3 服务器部署实操连接服务器使用SSH工具如PuTTY或终端连接到你的云服务器。安装必要软件# 更新系统包 sudo apt update sudo apt upgrade -y # 安装Docker和Docker Compose sudo apt install docker.io docker-compose -y # 启动Docker服务 sudo systemctl start docker sudo systemctl enable docker上传项目代码可以使用scp命令或SFTP工具如FileZilla将整个项目目录包含前后端代码和docker-compose.yml上传到服务器例如/home/ubuntu/my-website。构建并启动服务cd /home/ubuntu/my-website # 使用docker-compose一键构建和启动所有服务 sudo docker-compose up -d --build-d表示后台运行--build表示重新构建镜像。查看日志与状态# 查看所有容器状态 sudo docker-compose ps # 查看后端日志 sudo docker-compose logs -f backend # 如果启动失败根据日志排错5.4 配置Nginx反向代理进阶上面的docker-compose.yml中前端服务直接暴露了80端口。但在生产环境中我们通常希望用域名访问并且将后端API也通过Nginx代理统一端口、方便配置SSL证书。你可以创建一个自定义的Nginx配置文件替换前端容器内的默认配置。在服务器上创建nginx.confserver { listen 80; server_name your-domain.com; # 你的域名 # 前端静态文件 location / { root /usr/share/nginx/html; index index.html; try_files $uri $uri/ /index.html; # 支持Vue Router的history模式 } # 反向代理后端API location /api/ { proxy_pass http://backend:8080/; # 指向docker-compose网络中的后端服务名 proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header X-Forwarded-Proto $scheme; } }修改docker-compose.yml中的前端服务部分将此配置文件挂载到容器内frontend: build: ./frontend container_name: website-frontend volumes: - ./nginx.conf:/etc/nginx/conf.d/default.conf # 挂载自定义配置 ports: - 80:80 depends_on: - backend networks: - app-network重新部署sudo docker-compose up -d --build。现在访问你的服务器IP或域名应该能看到网站前端并且所有API请求都能正常通过。6. 开发与部署中的常见问题与排查思路在整个过程中我遇到了无数错误。AI最大的价值之一就是帮助快速定位和解决这些问题。以下是一些典型场景问题现象可能原因排查方式解决方案前端npm install失败网络问题、Node.js版本不兼容、package.json中依赖版本冲突。1. 检查网络连接。2. 查看错误日志看是否是某个特定包失败。3. 运行node --version和npm --version检查版本。1. 使用淘宝镜像npm config set registry https://registry.npmmirror.com。2. 删除node_modules和package-lock.json重新npm install。3. 根据错误信息让AI分析具体的版本冲突。Spring Boot启动报错BeanCreationException依赖缺失、配置错误、Bean循环依赖、数据库连接失败。1. 查看完整的控制台错误堆栈重点看Caused by后面的根本原因。2. 检查application.properties数据库配置。3. 检查pom.xml依赖是否完整。1. 将错误堆栈复制给AI它能快速定位到常见问题点如缺少Repository注解、数据库URL格式错误等。2. 确保MySQL服务已启动且用户名密码正确。前端调用API返回4041. 后端API路径写错。2. 前端请求的基地址baseURL不对。3. 后端Controller未被Spring扫描到。1. 在浏览器开发者工具的Network面板查看请求的完整URL。2. 在后端控制台查看启动日志确认Mapping路径。3. 直接使用Postman或curl测试后端API。1. 确认前端axios实例的baseURL配置为http://localhost:8080开发环境。2. 确认后端Controller类上有RestController和RequestMapping注解。3. 检查主应用类是否在Controller的上级包中。Docker构建失败Dockerfile语法错误、构建上下文缺少文件、镜像拉取失败。1. 运行docker build命令时会有详细的错误输出。2. 检查Dockerfile中的COPY路径是否正确。3. 检查.dockerignore文件是否排除了必要文件。1. 将Dockerfile和错误信息给AI分析。2. 确保在正确的目录下执行构建命令。3. 对于网络问题可以配置Docker镜像加速器。Docker容器启动后马上退出容器内主进程执行完毕退出、启动命令错误、端口冲突、依赖服务未就绪。1. 使用docker logs container_id查看容器日志。2. 使用docker-compose logs service_name查看服务日志。3. 检查docker-compose中depends_on设置。1. 确保Dockerfile的ENTRYPOINT或CMD是持久运行的命令如java -jar。2. 检查端口是否已被占用。3. 对于依赖服务可以在启动命令中添加等待脚本或使用restart: always策略。网站打开空白或JS/CSS加载失败Nginx配置错误、静态文件路径不对、Vue Router的history模式未配置。1. 浏览器F12查看Console和Network错误。2. 进入前端容器检查/usr/share/nginx/html目录下是否有文件。3. 检查Nginx配置文件中的root和try_files指令。1. 确认npm run build成功且dist目录内容被正确复制到容器。2. 在Nginx配置中添加try_files $uri $uri/ /index.html;解决Vue Router路由问题。给AI提问的黄金法则当遇到错误时不要只问“怎么办”。应该提供1. 你的目标是什么2. 你做了什么操作3. 完整的错误信息或日志4. 你已经尝试过的解决方案。这样AI才能给出最精准的回答。7. 最佳实践与工程建议超越“跑通”让项目从“能运行”到“可维护、可协作、够健壮”还需要一些工程化的思考。AI同样能在这方面提供建议。代码版本控制Git从一开始就使用Git。让AI帮你生成合理的.gitignore文件针对Java、Node.js、IDE、Docker等。每次完成一个功能就进行一次清晰的提交。API文档在Spring Boot项目中集成SpringDoc OpenAPISwagger UI。只需添加一个依赖AI就能指导你完成配置。这能让前后端协作更顺畅也是对自己API设计的梳理。!-- pom.xml 中添加 -- dependency groupIdorg.springdoc/groupId artifactIdspringdoc-openapi-starter-webmvc-ui/artifactId version2.3.0/version /dependency启动后访问http://localhost:8080/swagger-ui.html即可。前端环境变量管理不要在前端代码中硬编码API地址。使用.env文件。# .env.development VITE_API_BASE_URLhttp://localhost:8080 # .env.production VITE_API_BASE_URL/api在Vue代码中通过import.meta.env.VITE_API_BASE_URL获取。让AI教你如何配置Vite的环境变量。后端配置分离使用Spring Boot的application-{profile}.properties文件来区分开发、测试、生产环境配置如数据库连接、日志级别。通过spring.profiles.active激活。日志记录在Spring Boot中合理使用SLF4J日志。让AI教你如何配置logback-spring.xml将日志输出到文件并按天归档便于线上排查问题。安全性考虑数据库密码不要在docker-compose.yml或代码中写死密码。使用Docker Secrets或环境变量文件.env并在.gitignore中忽略它。API安全为你的后端API添加认证如JWT。这是一个相对复杂的主题但你可以分步让AI指导你实现先引入Spring Security依赖再配置一个简单的登录接口生成Token最后配置过滤器验证Token。性能与监控可选但重要数据库连接池Spring Boot默认使用HikariCP配置得当即可。前端懒加载使用Vue Router的懒加载功能让AI帮你优化路由配置拆分代码包。Docker资源限制在docker-compose.yml中为服务设置mem_limit和cpus防止单个容器耗尽服务器资源。回顾这两个月的旅程AI并没有替我思考也没有替我做出关键的技术决策。它更像一个不知疲倦、知识渊博的结对编程伙伴。我的角色从“执行者搜索者”转变为了“架构师审查者提问者”。我负责提出正确的问题、定义清晰的需求、审查AI生成的代码、并将其整合到一个可工作的系统中。这个过程极大地提升了我的学习效率和信心。以前卡在一个配置错误上可能就要搜索半天现在几分钟内就能得到多种可能的解决方案。更重要的是通过不断向AI提问和验证我对Vue 3、Spring Boot、Docker等技术的理解不再是碎片化的而是在解决具体问题的过程中构建起了系统性的认知。如果你也想开始自己的第一个全栈项目我的建议是不要试图一开始就设计一个完美的系统。从一个最小的、可运行的功能开始比如一个显示“Hello World”的页面和API然后像搭积木一样在AI的辅助下一个一个地添加功能用户登录、数据列表、表单提交等。每完成一个功能就完成了一次完整的学习循环。技术栈在变工具在变但构建软件的核心逻辑——分解问题、设计模块、实现、测试、集成、部署——从未改变。AI是放大你能力的杠杆而撬动这个杠杆的支点依然是你解决问题的决心和清晰的思路。现在是时候开始你的“从零到一”了。