09｜工程初始化（下）：前端工程与一键启动

Robert

你好，我是 Robert。
上一讲我们搭好了后端骨架——Maven 多模块结构、公共基础设施、健康检查接口，java -jar 能跑，访问 /api/v1/health 返回 200。
这一讲把剩下的补齐：前端 Vue 工程、前后端联通、启动脚本。做完之后，你执行一个 ./start.sh，后端前端同时起来，浏览器打开就能看到 Hify 的页面。
从零到能跑的完整闭环，这一讲交付完成。
前端 Vue 工程搭建和上一讲后端一样，前端初始化也要分步做。我分成三步：项目骨架、axios 统一请求层、路由和页面空壳。上一讲建立的任务拆解方法论直接复用，不再解释为什么要拆——按依赖关系排序，每步验证后进入下一步。
第一步：项目骨架给 Claude Code 的指令思路：
初始化 Hify 前端项目 hify-web。Vue 3 + TypeScript + Vite + Element Plus。目录结构按 CLAUDE.md 中定义的前端结构来。Vite 开发服务器配置代理：/api 请求转发到 localhost:8080。
输出是：
这一步比较标准化，Claude Code 一般不会出大问题。拿到输出后检查两件事：目录结构和 CLAUDE.md 里定义的是否一致；Vite 代理配置是否正确，开发阶段前端跑在 5173 端口，通过 Vite 代理转发 /api 请求到后端 8080 端口，解决跨域问题。

公开

同步至部落

取消

完成

0/2000

荧光笔

直线

曲线

笔记

复制

AI

深入了解
翻译
英语
中文简体
法语
德语
日语
韩语
俄语
西班牙语
解释
总结

仅可试看部分内容，如需阅读全部内容，请付费购买文章所属专栏
《Claude Code 企业级全链路开发实战》，新⼈⾸单¥59

立即购买

登录后留言

精选留言

由作者筛选后的优质留言将会公开显示，欢迎踊跃留言。

收起评论