Laravel 与 Vue 组合的单页应用启动器
Laravel-Vue-SPA — Vue 启动器模板
作者 dennischan9451
基于 Laravel 与 Vue 的单页应用启动器,内置 JWT 认证、注册登录、邮箱验证、密码重置与 GitHub Socialite 登录示例。
看看你的网站会是什么样
浏览真实页面截图,比较内容排版与手机效果。点击下方缩略图切换,放大查看整页细节。
目前有 1 张原始预览,可打开完整图片查看设计细节。
截图用于了解视觉与布局,交互效果请以实际项目为准。
值得关注的模板亮点
从已有项目资料中,快速了解它的特点。
集成 VueRouter、Vuex 与 VueI18n
使用 JWT 实现登录认证
包含注册、邮箱验证与密码重置流程
提供 GitHub Socialite 登录接入示例
前端使用 Bootstrap 4 与 Font Awesome 5
模板详细介绍
这是一个 Laravel + Vue 的单页应用(SPA)脚手架项目,定位为启动器,用于快速搭建带基础用户功能的前后端分离应用。前端使用 Vue,并集成 VueRouter、Vuex 与 VueI18n;页面采用动态导入与自定义布局。认证部分使用 JWT,覆盖登录、注册、邮箱验证和密码重置流程。项目附带 GitHub 作为 Laravel Socialite 的接入示例。样式层使用 Bootstrap 4 与 Font Awesome 5。
安装流程要求先克隆仓库、配置 .env 中的数据库连接,依次执行 php artisan key:generate、php artisan jwt:secret、php artisan migrate 与 npm install。开发阶段可用 npm run watch 构建并监听,或用 npm run hot 启动热重载;生产构建使用 npm run production。
启用邮箱验证需要让 App\User 模型实现 Illuminate\Contracts\Auth\MustVerifyEmail 契约。启用 GitHub 登录需新建 GitHub 应用,将 https://example.com/api/oauth/github/callback 设为授权回调地址,并在 .env 中填入 GITHUB_CLIENT_ID 与 GITHUB_CLIENT_SECRET;接入其他提供商需在 config/services.php 配置相应密钥,并在 OAuthController.php 中设置重定向地址。
项目采用 MIT 许可,允许免费使用、修改、商用和分发该版本代码,分发时需保留版权声明与完整 MIT 许可声明。演示图片、字体、图标等第三方素材需按各自许可单独核对;域名、托管、数据库等外部服务可能另行收费。
适合你的项目吗?
适用场景
- 搭建带用户认证的前后端分离项目
- 为 Vue SPA 配置 JWT 登录与注册流程
- 接入 GitHub 等第三方 OAuth 登录
- 需要多语言与路由状态管理的前端项目
适合人群
- 使用 Laravel 与 Vue 开发 SPA 的开发者
- 需要现成用户认证脚手架的项目
- 希望参考 Socialite 接入方式的团队
上手与定制指南
结合仓库当前版本的说明,按下面的资料检查内容、配置与运行要求。
- 1
克隆仓库后编辑 .env 配置数据库连接
- 2
依次执行 php artisan key:generate、php artisan jwt:secret、php artisan migrate
- 3
运行 npm install 安装前端依赖
- 4
开发用 npm run watch 或 npm run hot,生产构建用 npm run production
- 5
启用邮箱验证需让 App\User 实现 MustVerifyEmail 契约
授权与来源资料
使用条件与限制
免费使用 · 保留许可声明本次收录的是公开仓库中采用 MIT 许可的免费版本;免费范围为该版本代码,不代表外部服务或第三方素材免费。
使用时需要遵守
- 允许免费使用、修改、商用和分发该版本代码。
- 分发代码副本或实质性部分时,保留原作者版权声明和完整 MIT 许可声明。
- 代码按现状提供;担保与责任限制以原许可证及适用法律为准。
额外费用与待核对事项
- 使用 GitHub Socialite 登录需自行创建 GitHub 应用,并在 .env 中配置 GITHUB_CLIENT_ID 与 GITHUB_CLIENT_SECRET;接入其他 OAuth 提供商还需在 config/services.php 与 OAuthController.php 中另行配置。
- 运行项目需自备数据库并配置 .env 连接信息,数据库、域名与托管等外部服务可能产生额外费用。
- 邮箱验证功能默认未启用,需手动让 App\User 模型实现 MustVerifyEmail 契约后才可使用。
- 演示图片、字体、图标及其他第三方素材需按各自许可核对,不能仅凭代码的 MIT 许可判断。
- 域名、托管、数据库、支付或 AI 等外部服务可能另外收费。
查看原文依据
Permission is hereby granted, free of charge
许可证原文
To enable the provider create a new GitHub application and use `https://example.com/api/oauth/github/callback` as the Authorization callback URL.
README 原文
Edit `.env` and set your database connection details
README 原文
https://github.com/dennischan9451/Laravel-Vue-SPA/blob/master/LICENSEhttps://github.com/dennischan9451/Laravel-Vue-SPA/blob/master/README.mdTo enable email verification make sure that your `App\User` model implements the `Illuminate\Contracts\Auth\MustVerifyEmail` contract.
README 原文
DeepSeek 根据仓库许可证和 README 整理 ·2026-10-02。结果仅覆盖已读取资料,依赖、图片、字体及后续条款变更以各自原文为准。
项目核对记录与介绍依据
模板资料
- 来源平台
- GitHub
- 资料与维护参考分
- 资料一般 · 65 / 100
- 技术栈
- Vue · Laravel
- 网站类型
- 启动器
这个分数如何计算
本站按许可资料(最高30分)、演示链接(12分)、预览图(10分)、Star数(15分)、记录的维护时间(15分)、描述完整度(8分)、功能记录(5分)和分类资料(5分)计算。它不是代码、安全或性能测试,也不是 Google 评分;有链接不代表已实测可用。
这个项目需要核对什么
- 记录的仓库更新时间
- 2020-11-05
- 截图检查日期
- 2026-10-02
目前没有记录演示链接。请依据仓库说明在本地评估;仅凭截图无法确认交互行为。
目录记录的主要技术栈是 Vue。请通过依赖清单和锁文件核对实际版本与托管要求。这些说明基于收录资料,不代表代码审计或部署实测。
查看具体选型方法 →介绍的制作与核对状态
介绍由 AI 辅助整理目录与仓库资料。仓库作者不等于这篇介绍的审核者。
已完成服务器许可规则与 AI 来源核对;未经过人工编辑审核。
查看当时使用的来源资料
SHA-256: 25e135a16819a974a5d75759bcf027b0d962ab022409d2d140e2d8da85975fad
2026-10-02T22:43:36.839Z
来源文件 / 仓库# Laravel-Vue SPA > A simple Laravel-Vue SPA starter project scaffolding. <p align="center"> <img src="https://i.imgur.com/NHFTsGt.png"> </p> ## Features - Laravel 6.0 - Vue + VueRouter + Vuex + VueI18n - Pages with dynamic import and custom layouts - Login, register, email verification and password reset - Authentication with JWT - Socialite integration - Bootstrap 4 + Font Awesome 5 ## Installation - `git clone https://github.com/danielovieda/Laravel-Vue-SPA.git` - Edit `.env` and set your database connection details - `php artisan key:generate` - `php artisan jwt:secret` - `php artisan migrate` - `npm install` ## Usage #### Development ```bash # build and watch npm run watch # serve with hot reloading npm run hot ``` #### Production ```bash npm run production ``` ## Socialite This project comes with GitHub as an example for [Laravel Socialite](https://laravel.com/docs/5.8/socialite). To enable the provider create a new GitHub application and use `https://example.com/api/oauth/github/callback` as the Authorization callback URL. Edit `.env` and set `GITHUB_CLIENT_ID` and `GITHUB_CLIENT_SECRET` with the keys form your GitHub application. For other providers you may need to set the appropriate keys in `config/services.php` and redirect url in `OAuthController.php`. ## Email Verification To enable email verification make sure that your `App\User` model implements the `Illuminate\Contracts\Auth\MustVerifyEmail` contract.
看看同类模板
对比同技术栈与用途的模板,找到更适合的视觉与内容结构。

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 · 企业官网
