Laravel-Vue SPA 项目教程
项目介绍
Laravel-Vue SPA 是一个结合了 Laravel 后端和 Vue.js 前端的开源单页应用(SPA)项目。该项目旨在提供一个简单且干净的启动工具包,帮助开发者快速开始新的 SPA 项目。它类似于 Jetstream,但没有使用 Inertia,而是采用了 Vue-Router 和 Pinia 作为状态管理工具。
该项目使用了以下工具和技术:
- Vue 3
- Vue Router
- Pinia
- Axios
- Tailwindcss 3.x
- Laravel 11.x
- Laravel Sanctum
- Laravel Fortify
项目快速启动
环境准备
确保你已经安装了以下工具:
- PHP >= 8.0
- Composer
- Node.js >= 14.x
- NPM 或 Yarn
克隆项目
首先,克隆项目到本地:
git clone https://github.com/anindya-dhruba/laravel-vue-spa.git
cd laravel-vue-spa
安装依赖
安装 PHP 依赖:
composer install
安装前端依赖:
npm install
配置环境
复制 .env.example
文件并重命名为 .env
,然后配置数据库连接和其他必要的环境变量。
生成应用密钥:
php artisan key:generate
数据库迁移
运行数据库迁移:
php artisan migrate
启动开发服务器
启动 Laravel 开发服务器:
php artisan serve
启动 Vue 开发服务器:
npm run dev
现在,你可以在浏览器中访问 http://localhost:8000
查看应用。
应用案例和最佳实践
用户认证
该项目实现了基于 Sanctum 的 Cookie 认证,包括注册、登录、密码重置、电子邮件验证等功能。
用户管理
用户可以管理自己的个人资料,包括密码确认和两因素认证。
最佳实践
- 使用 Pinia 进行状态管理,确保状态的一致性和可维护性。
- 使用 Tailwindcss 进行样式设计,提高开发效率和样式一致性。
- 遵循 Laravel 和 Vue 的最佳实践,确保代码质量和性能。
典型生态项目
Laravel Sanctum
Laravel Sanctum 是一个轻量级的认证系统,适用于 SPA 和移动应用。它提供了基于 Cookie 和 Token 的认证方式。
Vue Router
Vue Router 是 Vue.js 的官方路由管理器,提供了强大的路由功能和导航控制。
Pinia
Pinia 是一个现代的状态管理库,专为 Vue 3 设计,提供了简单且高效的状态管理方案。
Tailwindcss
Tailwindcss 是一个实用优先的 CSS 框架,提供了丰富的预定义样式类,帮助开发者快速构建现代化的用户界面。
通过结合这些生态项目,Laravel-Vue SPA 提供了一个完整且高效的前后端开发解决方案。