详解如何在Laravel9.x中快速安装Bootstrap_网络技术

详解如何在Laravel9.x中快速安装Bootstrap

发布时间 - 2022-11-18 00:00:00 点击率：次

在 Laravel 9.x 中优雅且轻松的安装 Bootstrap 框架（vite 篇）

本文给大家分享以下 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 文件即可，即将其中的这两行代码

全部换成 @vite 代码

@vite(['resources/js/app.js'])

下面是我在 default.blade.php 放的位置




    @yield('title', 'Weibo App') - Laravel 入门教程
    @vite(['resources/js/app.js'])   <--- here!


    
        
            Weibo App
            
                帮助
                登录
            
        
    
    
        @yield('content')

之后我们后期学习中，但凡牵扯到 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 版本也会有更多新内容、新变动，大家一定要掌握解决问题的思路，死板学方法是行不通的，希望各位学习路上的初学者们不要放弃这一优美的框架，要不太可惜了！

# bootstrap # laravel # 自己的 # 工作流 # 这一 # 就行 # 线上 # 解决问题 # 版主 # 新版本 # 相比较 # 中能

相关栏目：【网站优化151355 】【网络推广146373 】【网络技术251813 】【 AI营销90571 】

上一篇：山西网络营销公司,纯正的山西有机小米有几种销售好方法？

下一篇：使用服务器建站系统时，怎样确保数据的安全性和隐私保护？

相关栏目网站优化
网络推广
网络技术
AI营销

最新文章 Sublime怎么一键压缩JS代码 Su sublime如何在搜索中使用正则表达式 Sublime如何设置透明窗口效果 Su mysql如何设计商品表结构_mysql css属性背景图不显示怎么办_通过检查路如何使用Golang实现排序_Golan 农历闰月是怎么回事_为合回归年加一月调整塑造《刺客信条》艾吉奥传奇的编剧离开育碧 1英里等于多少公里 1mile和km的换 css grid布局中行和列是如何定义的 PS批量旋转和翻转图片，快速校正图片方向 C# Swagger UI自定义方法 C OPPO手机九宫格和全键盘怎么切换_OP Go语言如何实现用户登录注册_Golan 1节飞行速度多少公里每小时 1节是多少公纸嫁衣8千子树第五章庙门怎么开启庙门 Laravel 多行数据编辑表单中实现逐明日之后如何提升钓鱼等级明日之后提升钓支付宝怎样查年度账单_支付宝年度账单查看 C# 多线程UI更新Dispatcher

上一篇：山西网络营销公司,纯正的山西有机小米有几种销售好方法？

下一篇：使用服务器建站系统时，怎样确保数据的安全性和隐私保护？