Laravel 11 + Vue 3 + Inertia.js 构建开发者作品集与后台 CMS
译注:本文编译自 dev.to 作者 Kashif Khan 的技术分享,原文介绍其开源的个人作品集与内容管理系统(CMS)的架构设计。原文链接见文末。
对于一名高级全栈工程师而言,用静态模板搭建个人作品集,难以充分体现复杂系统工程、实时并发处理以及运维严谨性方面的能力。为了展示真实的生产级工程水准,作者构建并开源了一套端到端的开发者作品集与内容管理系统(CMS),技术栈为 Laravel 11、Vue 3 与 Inertia.js。本文对其架构设计与技术选型思路进行梳理。
架构:Inertia.js 单体应用
作者没有选择构建前后端分离的客户端 SPA(那会带来重复的 API 路由和客户端认证令牌),而是采用了 Inertia.js 的现代单体架构:
- Laravel 11 后端:负责健壮的会话认证、数据库事务、Form Request 表单验证以及精简的控制器委托。
- Vue 3 前端:借助 Pinia 进行响应式状态管理,提供单页应用般的流畅体验。
- 零 API 样板代码:Inertia 会自动将服务端 props 序列化并直接注入 Vue 视图组件。
核心功能与工程挑战
1. 应用内移动端简历体验
标准移动端浏览器(例如 Android Chrome)可能会阻止在 <iframe> 子框架中内联渲染 PDF。为此,作者设计了一个设备自适应简历查看器:检测移动端视口后,启动原生全屏阅读器,并提供即时下载作为兜底方案。
2. 深度技术文章
作品集并未收录泛泛的教程,而是包含覆盖真实技术挑战的工程案例研究,例如:
- WebSocket 派发与低延迟 ESC/POS 热敏打印
- 在大型汽车目录上实现 Google Lighthouse 100/100 满分
- 在临床系统中处理分数单位的药品物流
3. 动态后台 CMS 门户
一套完整的管理套件,可管理以下内容:
- 技术技能
- 项目展示条目
- 客户评价
- 收到的消息
- 作品集内容
以上均可通过一个安全的私有仪表盘直接操作。
开源与在线演示
作者已将项目代码库在 GitHub 上完全开源,供希望获得生产级 Laravel + Vue 3 + Inertia.js 参考架构的开发者参考。