DEV Community
·
Laravel 12与Vue 3终极入门指南
💡
原文英文，约500词，阅读约需2分钟。
📝
内容提要
本文介绍了如何使用Vite设置Laravel 12与Vue 3结合的现代Web应用开发栈，包括安装Laravel、配置环境、安装Vue及其依赖、设置Vue路由和更新Blade模板。最后，通过Vite编译资产并启动Laravel服务器，成功运行Vue驱动的Laravel应用。
🎯
关键要点
- Laravel 12与Vue 3结合形成现代Web应用开发栈。
- 确保安装PHP 8.2+、Composer和Node.js。
- 通过Composer安装Laravel项目。
- 配置环境并生成应用密钥。
- 更新数据库凭据并迁移数据库。
- 使用Vite进行现代资产编译。
- 安装Node模块和Vue及其依赖。
- 配置Vite以支持Vue。
- 创建Vue应用入口点并设置Vue组件。
- 安装并配置Vue Router。
- 更新Blade模板以包含Vue。
- 使用Vite编译资产并启动Laravel服务器。
- 成功运行Vue驱动的Laravel应用，提供扩展项目的基础。
❓
延伸问答
如何安装Laravel 12？
使用Composer运行命令：composer create-project --prefer-dist laravel/laravel my-laravel-app。
在Laravel中如何配置数据库？
复制.env.example文件，生成应用密钥，并在.env文件中更新数据库凭据，然后运行php artisan migrate。
如何在Laravel中安装Vue 3和Vite？
运行npm install安装Node模块，然后使用npm install vue@latest vue-router@latest @vitejs/plugin-vue安装Vue及其依赖。
如何设置Vue Router？
安装Vue Router后，创建resources/js/router/index.js文件，定义路由并导出router。
如何更新Blade模板以包含Vue？
修改resources/views/app.blade.php文件，添加@vite(['resources/js/app.js'])以引入Vue。
如何运行Laravel与Vue结合的应用？
使用npm run dev编译资产，然后运行php artisan serve启动Laravel服务器。
➡️
