本文给大家分享以下 Laravel 9.x 下的前端工作流的使用心得,之前用 Laravel Mix,现在咱们这次就用用官方推荐的 vite 工具,同时继续使用 bootstrap 5,这样的话既能方便课程学者即能掌握最新的前端工作流,又能低门槛的调整自己喜欢的样式。最重要的是不影响教程的学习进度和节奏。【推荐:laravel视频教程】
写在前面
开发环境:
大环境上是 Windows 10/11 + Homestead,均为最新稳定版本
两个平台都安装 Node.js
Laravel 版本为 9.x(发文时我用的是最新的 9.38.0) ,其他未提及的按照 9.x 版本的教程来
不使用 Laravel Mix,使用官方推荐的新前端打包工具 vite 完成教程里关于样式的修改任务。
我的目的:在 Windows 和 homestead 两个平台使用 Node.js 来规避安装 Bootstrap 中能踩到的坑,让苦逼的 Win 用户学习《L01 Laravel 教程 - Web 开发实战入门》的《4.2. 样式美化》章节做到 优雅且轻松。
不多废话,线上操作
操作方法
首先默认读者已经学习到《4.2. 样式美化》章节,并且很不幸的被卡住,其次,自己的 Windows 电脑和 Homestread 环境都可以运行 Node.js。Windows 下没有装 Node.js 的可通过搜索引擎搜索下载,傻瓜式的安装流程,不再赘述。
首先我们根据教程做到下方这一步,但先别执行
composer require laravel/ui:3.4.5 --dev
我们改改,这里直接获取默认的最新 laravel/ui 版本,并在 linux 内执行
composer require laravel/ui // 发文时最新的版本是 4.0.1,对不住了版主,我自己偷摸的上到最新的版本惹 php artisan ui bootstrap
然后我们到 windows 环境下开一个终端,比如 powershell,并执行
npm config set registry=https://registry.npm.taobao.org npm i
然后回到你的编辑器,找到项目根目录下刚生成的 vite.coffig.js 我们修改成如下的效果
import { defineConfig } from 'vite'; import laravel from 'laravel-vite-plugin'; import path from 'path' export default defineConfig({ plugins: [ laravel([ 'resources/js/app.js', ]), ], resolve: { alias: { '~bootstrap': path.resolve(__dirname, 'node_modules/bootstrap'), } }, });
然后在 app.js 中导入 boostrap 5 的 scss
import './bootstrap'; // 以下为新增部分 import '../sass/app.scss' import * as bootstrap from 'bootstrap'
之后再去项目的 blade 模板中,更换原本的 mix () 代码。这里的话要是根据教程来,我们只改那个 default.blade.php 文件即可,即将其中的这两行代码
<link rel="stylesheet" href="{{ mix('css/app.css') }}"> <script src="{{ mix('js/app.js') }}"></script>
全部换成 @vite 代码
@vite(['resources/js/app.js'])
下面是我在 default.blade.php 放的位置
<!DOCTYPE html> <html> <head> <title>@yield('title', 'Weibo App') - Laravel 入门教程</title> @vite(['resources/js/app.js']) <--- here! </head> <body> <nav class="navbar navbar-expand-lg navbar-dark bg-dark"> <div class="container"> <a class="navbar-brand" href="/">Weibo App</a> <ul class="navbar-nav justify-content-end"> <li class="nav-item"><a class="nav-link" href="/help">帮助</a></li> <li class="nav-item"><a class="nav-link" href="#">登录</a></li> </ul> </div> </nav> <div class="container"> @yield('content') </div> </body> </html>
之后我们后期学习中,但凡牵扯到 Mix 的一律按照这个思路处理。
最后,在 windows 终端输入如下指令
npm run build // 或者 npm run dev
操作结束,刷新以下浏览器就可看到效果。
至于 dev 和 build 的区分就是:
dev 适合开发的时候随时调整,你的修改是实时生效且自动的,建议开发的时候一直开个窗口挂后台就行
build 会一步处理完毕并输出 css 和 js 文件,只会执行一次不会自动,适合最后发布阶段。
速度方面,相比较 laravel Mix 前端工作流,vite 会以闪电般的速度给你稳健的处理好,放心,vite 的处理速度实在是太快惹。
项目部署
当我们的代码上传到远端 git 仓库后,再拉到生产环境时,vite 使用 npm run build 生成的 css 和 js 文件是不会纳入 git 管理的,也就是你在本地 git add -A 是包括不了他俩的,我们需要在本地开发项目的根目录找到.gitignore 文件,注释或者删除 /public/build 这一行,具体如下
/node_modules # /public/build <-- here /public/hot /public/storage /storage/*.key /vendor .env .env.backup .phpunit.result.cache Homestead.json Homestead.yaml auth.json npm-debug.log yarn-error.log /.idea /.vscode
之后我们 build 的文件就可以被 git add -A 检测到。
当然,你也完全可以在线上编译样式,这个思路你懂就行,举一反三嘛。
其他小贴士
bootstrap 5 已经删除原本 4 版本的 Jumbotron 组件,所以你看不到对应的样式,正常现象。想改的请发挥自己的想象,去自己写一个。
关于 4.4. 浏览器缓存问题 章节,若你使用 vite 的前端工作流,build 完毕后,会自动给样式文件加上后缀,所以这一章节可以不看,使用 vite 的工作模式是不存在这个问题的,跳过继续学习。
是否发现本文有些地方你可以提出你自己的方法,这样最好,我的回答不是最完美的,大家学习过程中能提出自己独立思考的疑问或者解决方案,才是最棒的结果,欢迎大家探索适合自己的解决方案。
最后碎碎念
然后相比较版主教程里让我们用特定版本学习 laravel 的方法,但我还是喜欢遵循官方的文档说明,尽量用原生方法实现相关效果,且方方面面的都是用最新版本,也算是版主推荐规范化思路下的一个 “叛逆邪道” 吧,自己也需要解决时不时遇到的新版本兼容问题。总之希望这篇文章可以为初学者提供一个新思路,毕竟我们是学习阶段,而非生产环境开发,多学一点是一点。
相比我之前 8.x 的经验分享,这个属于新技术的学习与适配,第一次遇到新版本内容我也栽了。自行学习,寻找方案,然后解决问题,学会思路比学会方法更重要,相信后期的 10.x 、100.x 版本也会有更多新内容、新变动,大家一定要掌握解决问题的思路,死板学方法是行不通的,希望各位学习路上的初学者们不要放弃这一优美的框架,要不太可惜了!
以上就是详解如何在Laravel9.x中快速安装Bootstrap的详细内容,更多请关注php中文网其它相关文章!