Laravel 9 后端与 Vue 3 前端组合,前后端分离结构
Laravel9-Vue3-TypeScript — Vue 启动器模板
作者 islamroshan
基于 Laravel 9 与 Vue 3 的前后端分离启动模板,集成 TypeScript、Sanctum 认证、Vuex、Vue Router 与 PrimeVue 组件库,用于快速搭建带管理后台的新项目。
看看你的网站会是什么样
浏览真实页面截图,比较内容排版与手机效果。点击下方缩略图切换,放大查看整页细节。
全部页面与视图 2
截图用于了解视觉与布局,交互效果请以实际项目为准。
值得关注的模板亮点
从已有项目资料中,快速了解它的特点。
使用 Laravel Sanctum 提供认证支持
前端集成 TypeScript、Vue Class Component、Vuex 与 Vue Router
引入 PrimeVue 组件库和 PrimeFlex 栅格系统
附带管理后台界面,README 提供演示账号
采用 MIT 许可,允许修改、商用与分发
模板详细介绍
这是一个 Laravel 9 Starter Kit 仓库,目标是为同时使用 Laravel 与 Vue 的新项目提供已配置好的脚手架。后端采用 Laravel 9,并使用 Laravel Sanctum 处理认证;前端采用 Vue 3,配合 Vue Class Component、Vuex、Vue Router 与 TypeScript,界面层引入 PrimeVue 组件库和 PrimeFlex 栅格系统。README 说明可以直接克隆仓库后开始开发,并列出所需依赖与启动步骤。
模板包含一个管理后台,README 中提供了演示账号(邮箱 [email protected],密码 123456789),并附有首页、侧边栏与仪表盘截图。开发环境以 Laravel Sail 为主,启动流程包括构建 Sail 容器、安装 Composer 与 npm 依赖、运行迁移与数据填充、启动前端开发服务器。
仓库采用 MIT 许可,允许免费使用、修改、商用和分发代码,但演示图片、字体、图标等第三方素材需按各自许可单独核对,域名、托管、数据库等外部服务也可能产生费用。该模板未说明生产环境部署方案或长期维护状态。
适合你的项目吗?
适用场景
- 需要同时使用 Laravel 与 Vue 3 的新项目初始化
- 搭建带认证与后台界面的管理型应用
- 在 Vue 3 项目中引入 TypeScript 与 PrimeVue 的起步参考
- 使用 Laravel Sail 作为本地开发环境的团队
适合人群
- 熟悉 Laravel 与 Vue 的前后端开发者
- 需要快速获得已配置脚手架的个人或小团队
- 希望以 TypeScript 编写 Vue 3 组件的项目
- 接受以 PrimeVue 作为 UI 组件库的项目
上手与定制指南
结合仓库当前版本的说明,按下面的资料检查内容、配置与运行要求。
- 1
需预先安装 npm、Node 与 PHP,README 以 Laravel Sail 作为开发环境
- 2
克隆仓库后依次执行 Sail 构建、Composer install 与 npm install
- 3
运行 sail artisan migrate 与 db:seed 初始化数据库
- 4
使用 sail npm run dev 启动前端开发服务器,再访问 localhost
- 5
演示后台账号为 [email protected],密码 123456789,仅用于本地验证
授权与来源资料
使用条件与限制
免费使用 · 保留许可声明本次收录的是公开仓库中采用 MIT 许可的免费版本;免费范围为该版本代码,不代表外部服务或第三方素材免费。
使用时需要遵守
- 允许免费使用、修改、商用和分发该版本代码。
- 分发代码副本或实质性部分时,保留原作者版权声明和完整 MIT 许可声明。
- 代码按现状提供;担保与责任限制以原许可证及适用法律为准。
额外费用与待核对事项
- 使用该模板需自行安装 npm、Node.js 与 PHP;README 以 Laravel Sail 作为开发环境,未提供其他环境配置说明。
- README 提供的后台演示账号 [email protected] / 123456789 仅为本地演示凭据,不应直接用于生产环境。
- 演示图片、字体、图标及其他第三方素材需按各自许可核对,不能仅凭代码的 MIT 许可判断。
- 域名、托管、数据库、支付或 AI 等外部服务可能另外收费。
查看原文依据
Permission is hereby granted, free of charge
许可证原文
Make sure you have npm, node, php installed, I have used laravel sail for my development enviroment
README 原文
https://github.com/islamroshan/Laravel9-Vue3-TypeScript/blob/main/LICENSE.mdhttps://github.com/islamroshan/Laravel9-Vue3-TypeScript/blob/main/README.mdAdmin Dashboard Credentials Email: [email protected] Pwd: 123456789
README 原文
DeepSeek 根据仓库许可证和 README 整理 ·2026-10-03。结果仅覆盖已读取资料,依赖、图片、字体及后续条款变更以各自原文为准。
项目核对记录与介绍依据
模板资料
- 来源平台
- GitHub
- 资料与维护参考分
- 资料一般 · 65 / 100
- 技术栈
- Vue · Laravel
- 网站类型
- 启动器
这个分数如何计算
本站按许可资料(最高30分)、演示链接(12分)、预览图(10分)、Star数(15分)、记录的维护时间(15分)、描述完整度(8分)、功能记录(5分)和分类资料(5分)计算。它不是代码、安全或性能测试,也不是 Google 评分;有链接不代表已实测可用。
这个项目需要核对什么
- 记录的仓库更新时间
- 2022-08-03
- 截图检查日期
- 2026-10-03
已收录演示链接。请用你的内容与屏幕尺寸检查;有演示不代表表单、认证或支付已经可用。
目录记录的主要技术栈是 Vue。请通过依赖清单和锁文件核对实际版本与托管要求。这些说明基于收录资料,不代表代码审计或部署实测。
查看具体选型方法 →介绍的制作与核对状态
介绍由 AI 辅助整理目录与仓库资料。仓库作者不等于这篇介绍的审核者。
已完成服务器许可规则与 AI 来源核对;未经过人工编辑审核。
查看当时使用的来源资料
SHA-256: 2eec29f8b5319bf2b381ecf3276f29b8bb5e72d35f82d23e7b03ac6b592ca400
2026-10-03T03:28:08.949Z
来源文件 / 仓库<h1>Laravel 9 Development Starter Project.</h1>
Descripton: in this repository you will get Laravel-9 starter scafold with configured settings for instance, if you are planning to start a new project with vue and laravel then only thing you need will be to fetch this repository and start building your app.
This includes all latest pakages for development, Below are the list of pakages installed.
<ul>
<li>Laravel 9</li>
<li>Laravel Sanctum for authentication</li>
<li>Vue 3</li>
<li>Vue Class Component</li>
<li>Vuex</li>
<li>Vue Router</li>
<li>TypeScript</li>
<li>Prime Vue (Frontend framework for Vue js)</li>
<li>Prime Flex (Gird System) and many other dependencies to start a new project</li>
</ul>
You can clone the project and make changes or distrubute it without any restrictions.
Leave a Star/Fork if you appreciate my efforts.
Follow these steps to run this app.
<ol>
<li>Make sure you have npm, node, php installed, I have used laravel sail for my development enviroment</li>
<li>Clone the git repository</li>
<li>cd into the directory</li>
<li>Run, sail build or ./vendor/bin/sail build</li>
<li>Run, Composer install</li>
<li>Run, npm install</li>
<li>Run, sail down and then sail up -d</li>
<li>Run, sail artisan migrate</li>
<li>Run, sail db:seed</li>
<li>Run, sail npm run dev</li>
<li>Open browser and type localhost</li>
</ol>
Admin Dashboard Credentials
Email: [email protected]
Pwd: 123456789
Thanks
<img src="https://github.com/islamroshan/Laravel9-Vue3-TypeScript/blob/main/image.png" height="100%" width="100%">
<img src="https://github.com/islamroshan/Laravel9-Vue3-TypeScript/blob/main/sidebar.png" height="100%" width="100%">
<img src="https://github.com/islamroshan/Laravel9-Vue3-TypeScript/blob/main/Dashboard.png" height="100%" width="100%">
看看同类模板
对比同技术栈与用途的模板,找到更适合的视觉与内容结构。

vitesse
🏕 Opinionated Vite + Vue Starter Template
Vue · 启动器

vitesse-webext
⚡️ WebExtension Vite Starter Template
Vue · 启动器

laravel-vue-spa
A Laravel-Vue SPA starter kit.
Vue · 启动器

vue3-h5-template
vue3-h5-template 是一个面向移动端 H5 项目的启动模板,基于 Vue3、Vite 和 Vant4 构建,同时集成了 TypeScript、Tailwindcss、Pinia、Vue-router 等常用…
Vue · 启动器

tov-template
vite + vue3 + ts 开箱即用现代开发模板 | vite + vue3 + ts out-of-the-box modern development template
Vue · 启动器

shadcn-vue-landing-page
New design 🎉 Vue + Shadcn-vue + TypeScript + Tailwind. Landing page template ease-to-use
Vue · 企业官网
