使用 Vue 3 和 Go 构建全栈应用程序 | Working with Vue3 and Go (Golang)

这是一门围绕 Vue 3 与 Go 的全栈实践资料，核心不在「讲多少概念」，而在把前后端串成一条可运行的链路。它适合已经写过一点 JavaScript、想弄清楚一个请求从浏览器发出、经过 HTTP 接口、落到 Go 服务端并最终返回 JSON 的完整过程的人。整套内容以 Composition API 为主线组织前端，以标准库与轻量路由组织后端，中间不塞过多脚手架，能让你看清每一层实际承担了什么。

前端为什么从 Composition API 切入

Vue 3 的写法分化比较明显：Options API 对新手友好，Composition API 更适合把逻辑抽出来复用。这份资料选后者作为主线，意味着你会频繁接触setup、ref、reactive、computed这类原语，而不是把状态塞进 data 里。对工程来说，这种组织方式的价值在于：当页面需要复用一段请求逻辑或表单校验时，你可以把它写成独立的组合式函数，而不是靠 mixin 去猜来源。

配合组件通信、props 与 emit 的使用，前端部分基本覆盖了一个中小型 SPA 需要的骨架。值得留意的是它没有把状态管理当成必选项——这在教学上反而更诚实，因为很多项目在真正需要之前，用一个模块级的 reactive 对象就够了。资料末尾也指向了 Pinia、Nuxt 之类更重的方案，等于给你留了继续深入的方向索引。

Go 后端承担的角色与测试位置

后端没有走「一上来就上框架」的路线，更多是围绕标准库的net/http、路由注册、handler 编写、JSON 编解码来展开。这种结构的好处是路由和方法绑定的关系一目了然，你写的每个 handler 都是显式的函数，不依赖注解或反射去推断。对之后切换到 Gin、Echo、Chi 之类框架的人来说，这层基础能让迁移变得可预期。

把后端测试放进主线是这份资料比较务实的一点。Go 自带的testing包配合httptest，可以在不起真实端口的情况下验证 handler 的输入输出。学会这套写法之后，接口契约的验证就不再依赖手动点 Postman，而是能进入 CI。对全栈方向的人来说，这是从「能跑」到「敢改」的分界线。

项目结构与可复用模块

作为一份全栈资料，前后端分离的目录划分是理解成本最低的一种。前端负责视图与状态，后端负责数据与接口，两者通过约定的 JSON 结构通信。真正值得复用下来的不是某个具体页面的代码，而是这几类模式：

• 请求封装层：把 fetch 或 axios 收敛成统一函数，集中处理 baseURL、错误码与加载状态。
• 领域模型映射：Go 端的 struct 与前端 TypeScript 类型保持字段一致，避免线上才发现字段名对不上。
• 路由与中间件顺序：日志、鉴权、CORS 的挂载点，决定了出问题时排查的路径。
• 接口测试用例：httptest的写法可以直接复制到下一个项目。

这些模块单独拎出来都不复杂，但组合起来就是一个可运行的最小闭环，比零散看十篇博客更接近真实工程。

适合拿来对照实践的方式

这门内容的定位是「边写边看」，不是「看完再写」。比较有效的用法是：先把后端 handler 和测试跑起来，用curl或httptest确认接口行为，再回到前端把请求接上，最后处理加载态和错误提示。如果只看视频不落代码，前后端之间的数据形状、错误处理时机这类细节很容易被略过，而这些恰恰是全栈开发里最容易出问题的地方。

对已经熟悉其中一端的人，也可以只挑另一半对照：写惯了 Vue 的可以重点看 Go 的测试组织，写过 Go 的可以重点看组合式函数如何拆分。资料本身没有把学习顺序钉死，这种可拆解的结构，正好适合按自己的缺口去取用。至于更进一步的 SSR、状态管理库、UI 组件库，它只给了入口，没有展开——这属于后续按项目需要自己补的部分，而不是这份资料的遗留问题。