Laravel 后端 + Vue 前端的 SPA 启动器结构
VueLaravel启动器
laravel-vue-spa — Vue 启动器模板
作者 cretueusebiu
基于 Laravel 与 Vue 的单页应用启动器，内置 JWT 认证、邮箱验证、密码重置与 GitHub 社交登录示例。
看看你的网站会是什么样
浏览真实页面截图，比较内容排版与手机效果。点击下方缩略图切换，放大查看整页细节。
全部页面与视图 2
截图用于了解视觉与布局，交互效果请以实际项目为准。
采集于 2026-10-01查看来源
值得关注的模板亮点
从已有项目资料中，快速了解它的特点。
集成 VueRouter、Vuex、VueI18n 与 ESLint
内置登录、注册、邮箱验证与密码重置流程
使用 JWT 进行认证，并集成 Laravel Socialite（GitHub 示例）
页面支持动态导入与自定义布局，界面基于 Bootstrap 5 与 Font Awesome 5
模板详细介绍
这是一个 Laravel + Vue 的单页应用（SPA）启动器，用于快速搭建前后端分离的 Web 应用骨架。后端使用 Laravel 提供 API 与认证逻辑，前端使用 Vue 配合 VueRouter、Vuex、VueI18n 和 ESLint，页面采用动态导入与自定义布局，界面基于 Bootstrap 5 与 Font Awesome 5。
认证部分是该模板的重点：包含登录、注册、邮箱验证和密码重置流程，使用 JWT 进行身份认证，并集成 Laravel Socialite，以 GitHub 作为示例提供方。README 说明可通过 composer create-project 创建项目，配置 .env 中的数据库连接后执行迁移，再运行 npm install 安装前端依赖；开发使用 npm run dev，生产使用 npm run build。
需要注意的限制：README 中列出的框架版本为 Laravel 8，仓库最后更新时间为 2022 年，依赖版本可能已过时。启用邮箱验证需让 App\User 模型实现 MustVerifyEmail 契约；启用 GitHub 登录需自行创建 GitHub 应用并配置回调地址与客户端密钥，其他提供方需修改 config/services.php 和 OAuthController.php。演示图片、字体、图标等第三方素材的许可需单独核对。
VueLaravel启动器
适合你的项目吗？
适用场景
- 需要快速搭建带认证功能的 Laravel + Vue 单页应用骨架
- 为前后端分离项目准备登录、注册与密码重置等基础流程
- 在 Laravel 项目中接入 JWT 认证与 GitHub 社交登录
- 需要多语言（VueI18n）与按页面动态加载的前端结构
适合人群
- 熟悉 Laravel 与 Vue、希望直接使用现成认证骨架的开发者
- 需要 JWT + Socialite 登录方案的前后端分离项目
- 以 Bootstrap 5 为界面基础、需要多语言支持的 SPA 项目
上手与定制指南
结合仓库当前版本的说明，按下面的资料检查内容、配置与运行要求。
- 1
使用 composer create-project --prefer-dist cretueusebiu/laravel-vue-spa 创建项目，并编辑 .env 配置数据库连接
- 2
若通过 git clone 或下载安装，需运行 php artisan key:generate 和 php artisan jwt:secret
- 3
执行 php artisan migrate 迁移数据库，再运行 npm install 安装前端依赖
- 4
开发环境运行 npm run dev，生产构建运行 npm run build
- 5
启用 GitHub 登录需创建 GitHub 应用，将回调地址设为 https://example.com/api/oauth/github/callback，并在 .env 中设置 GITHUB_CLIENT_ID 与 GITHUB_CLIENT_SECRET
授权与来源资料
使用条件与限制
免费使用 · 保留许可声明本次收录的是公开仓库中采用 MIT 许可的免费版本；免费范围为该版本代码，不代表外部服务或第三方素材免费。
使用时需要遵守
- 允许免费使用、修改、商用和分发该版本代码。
- 分发代码副本或实质性部分时，保留原作者版权声明和完整 MIT 许可声明。
- 代码按现状提供；担保与责任限制以原许可证及适用法律为准。
额外费用与待核对事项
- 启用 GitHub 社交登录需自行创建 GitHub 应用，并将授权回调地址设置为 https://example.com/api/oauth/github/callback。
- 使用 GitHub 登录必须在 .env 中配置 GITHUB_CLIENT_ID 与 GITHUB_CLIENT_SECRET，密钥来自自建的 GitHub 应用。
- 接入 GitHub 以外的社交登录提供方，需自行修改 config/services.php 的密钥与 OAuthController.php 的重定向地址。
- 启用邮箱验证功能，需让 App\User 模型实现 Illuminate\Contracts\Auth\MustVerifyEmail 契约。
- 使用前必须在 .env 中配置数据库连接信息。
- 演示图片、字体、图标及其他第三方素材需按各自许可核对，不能仅凭代码的 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 `GITHUB_CLIENT_ID` and `GITHUB_CLIENT_SECRET` with the keys form your GitHub application.
README 原文
For other providers you may need to set the appropriate keys in `config/services.php` and redirect url in `OAuthController.php`.
README 原文
To enable email verification make sure that your `App\User` model implements the `Illuminate\Contracts\Auth\MustVerifyEmail` contract.
README 原文
https://github.com/cretueusebiu/laravel-vue-spa/blob/master/LICENSEhttps://github.com/cretueusebiu/laravel-vue-spa/blob/master/README.mdEdit `.env` and set your database connection details
README 原文
DeepSeek 根据仓库许可证和 README 整理 ·2026-10-01。结果仅覆盖已读取资料，依赖、图片、字体及后续条款变更以各自原文为准。
项目核对记录与介绍依据
模板资料
- 来源平台
- GitHub
- 资料与维护参考分
- 资料较完整 · 85 / 100
- 技术栈
- Vue · Laravel
- 网站类型
- 启动器
这个分数如何计算
本站按许可资料（最高30分）、演示链接（12分）、预览图（10分）、Star数（15分）、记录的维护时间（15分）、描述完整度（8分）、功能记录（5分）和分类资料（5分）计算。它不是代码、安全或性能测试，也不是 Google 评分；有链接不代表已实测可用。
这个项目需要核对什么
- 记录的仓库更新时间
- 2022-10-19
- 截图检查日期
- 2026-10-01
已收录演示链接。请用你的内容与屏幕尺寸检查；有演示不代表表单、认证或支付已经可用。
目录记录的主要技术栈是 Vue。请通过依赖清单和锁文件核对实际版本与托管要求。这些说明基于收录资料，不代表代码审计或部署实测。
查看具体选型方法 →介绍的制作与核对状态
介绍由 AI 辅助整理目录与仓库资料。仓库作者不等于这篇介绍的审核者。
已完成服务器许可规则与 AI 来源核对；未经过人工编辑审核。
查看当时使用的来源资料
SHA-256: 7ec202a16a4c8787902d75983740b53e786210aa8b380fb74a3a7db9677cc1f5
2026-10-01T02:28:08.004Z
来源文件 / 仓库# Laravel-Vue SPA <a href="https://github.com/cretueusebiu/laravel-vue-spa/actions"><img src="https://github.com/cretueusebiu/laravel-vue-spa/workflows/tests/badge.svg" alt="Build Status"></a> <a href="https://packagist.org/packages/cretueusebiu/laravel-vue-spa"><img src="https://poser.pugx.org/cretueusebiu/laravel-vue-spa/d/total.svg" alt="Total Downloads"></a> <a href="https://packagist.org/packages/cretueusebiu/laravel-vue-spa"><img src="https://poser.pugx.org/cretueusebiu/laravel-vue-spa/v/stable.svg" alt="Latest Stable Version"></a> > A Laravel-Vue SPA starter kit. <p align="center"> <img src="https://i.imgur.com/NHFTsGt.png"> </p> ## Features - Laravel 8 - Vue + VueRouter + Vuex + VueI18n + ESlint - Pages with dynamic import and custom layouts - Login, register, email verification and password reset - Authentication with JWT - Socialite integration - Bootstrap 5 + Font Awesome 5 ## Installation - `composer create-project --prefer-dist cretueusebiu/laravel-vue-spa` - Edit `.env` and set your database connection details - (When installed via git clone or download, run `php artisan key:generate` and `php artisan jwt:secret`) - `php artisan migrate` - `npm install` ## Usage #### Development ```bash npm run dev ``` #### Production ```bash npm run build ``` ## 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. ## Testing ```bash # Run unit and feature tests vendor/bin/phpunit # Run Dusk browser tests php artisan dusk ``` ## Changelog Please see [CHANGELOG](CHANGELOG.md) for more information what has changed recently.
看看同类模板
对比同技术栈与用途的模板，找到更适合的视觉与内容结构。
vitesse
🏕 Opinionated Vite + Vue Starter Template
Vue · 启动器
vitesse-webext
⚡️ WebExtension Vite Starter Template
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 · 企业官网
vite-ts-tailwind-starter
Opinionated Vite + Vue 3 + TypeScript + Tailwind CSS starter template w/ tests and CI.
Vue · 启动器