Skip to content

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 参考架构的开发者参考。

原文链接 ​

https://dev.to/kashif_khan_dev/architecting-an-executive-developer-portfolio-admin-cms-with-laravel-11-vue-3-and-inertiajs-1ik0