在 Laravel 8.x 中优雅且轻松的安装 Bootstrap 框架

写在前面

开发环境:

  • 大环境上是 Windows 10/11 + Homestead,均为最新稳定版本
  • 两个平台都安装 Node.js
  • Laravel 版本为 8.x ,其他未提及的按照 8.x 版本的教程来

我的目的:在 Windows 和 homestead 两个平台使用 Node.js 来规避安装 Bootstrap 中能踩到的坑,让苦逼的 Win 用户学习《L01 Laravel 教程 - Web 开发实战入门》的《4.2. 样式美化》章节做到 优雅且轻松

不多废话,线上操作

操作方法

首先默认读者已经学习到《4.2. 样式美化》章节,并且很不幸的被卡住,其次,自己的 Windows 电脑和 Homestread 环境都可以运行 Node.js。Windows 下没有装 Node.js 的可通过搜索引擎搜索下载,傻瓜式的安装流程,不再赘述

根据教程,我们在虚机里走到使用 Bootstrap 前端框架这一步

$ composer require laravel/ui:^3.0  --dev
$ php artisan ui bootstrap

然后再根据教程做镜像加速

$ npm config set registry=https://registry.npm.taobao.org

从这开始,我们有所变动 。首先我们不需要 yarn 来进行安装,yarn 存在的意义就是安装我们需要的包,npm 就可以做到,大家无需担心这部分操作会影响教程的学习。此时我们回到 Windows 端,打开 Windows Terminal,我们要在 Windows 下进行安装,进入项目根目录执行如下指令

> npm install

npm install
完成后继续在 Windows 下进行编译,可能需要两次运行

> npm run watch-poll

第一次 npm run watch-poll
第二次 npm run watch-poll
直到成功编译
编译成功

结束!

相比其他人的解决方案,我们没有变动任何配置文件,没有删除任何代码,遵循教程优雅的开发感觉,便让苦逼的 win 用户 优雅且轻松 的用上了 Bootstrap,之后我们继续按照教程学习即可,不打乱学习的进度与优雅的开发感觉

最后碎碎念

解决方案属实很简单,但在公司的日常开发中,为了能在 laravel 中用到 bootstrap ,这块教程我认为有改进的空间,我自己猜测站长出教程的时候应该还是苹果本做主力,这块问题出现的一般都是我这样的 win 用户,我从 5.5 版本接触本教程到现在的 8.x 版本,都在这一步卡住且没找到优雅的解决方案,在自己不断的尝试中误打误撞的把这个问题解决了,最后希望能帮到初学者们更顺利的学习这个优秀的教程,不希望让大家因为这点小事儿被劝退,多钻研多学习,少点抱怨多点行动,没啥难题是克服不了的,当年我真的让这块问题整麻了 :sweat_smile:

祝各位入门的初心者们,不忘初心,砥砺前行,加油!

I used to be an adventurer like you, then I took an arrow in the knee.
本帖已被设为精华帖!
本帖由 laravel_peng 于 2年前 加精
《L05 电商实战》
从零开发一个电商项目,功能包括电商后台、商品 & SKU 管理、购物车、订单管理、支付宝支付、微信支付、订单退款流程、优惠券等
《G01 Go 实战入门》
从零开始带你一步步开发一个 Go 博客项目,让你在最短的时间内学会使用 Go 进行编码。项目结构很大程度上参考了 Laravel。
讨论数量: 7
porygonCN

bootstrap过时了(不是),试试taillwind?

2年前 评论
NightingaleWK

@gema 有一说一,确实。taillwind 属实优雅,我就挺喜欢的(喜新厌旧)。我这就在自己的测试项目上用着耍, bootstrap 我也不用了。对于教程来说用 bootstrap 还是考虑到好入门,当初写这文章就是怕新手在这弃坑了 :joy: :joy: :joy:

2年前 评论

谢谢大佬的分享,我真的被这个教程的配置环境的操作给整麻了。按照大佬的步骤执行确实成功安装了 Laravel Mix v6.0.37,
不过在git中还是执行npm run watch-poll 还是会报错。这个是咋回事啊?可以不用管这个bug了吗?

2年前 评论

感谢分享!亲测 Laravel 8.6.11 有效 :+1:

file

2年前 评论

感谢,用您的方法成功了

1年前 评论

感谢感谢

1年前 评论
Albertxx7 1年前

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容,与人为善,比聪明更重要!