• 技术文章 >php框架 >Laravel

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

    藏色散人藏色散人2022-11-18 21:04:15转载162

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

    本文给大家分享以下 Laravel 9.x 下的前端工作流的使用心得,之前用 Laravel Mix,现在咱们这次就用用官方推荐的 vite 工具,同时继续使用 bootstrap 5,这样的话既能方便课程学者即能掌握最新的前端工作流,又能低门槛的调整自己喜欢的样式。最重要的是不影响教程的学习进度和节奏。【推荐:laravel视频教程

    写在前面

    开发环境:

    我的目的:在 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 的区分就是:

    速度方面,相比较 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 版本也会有更多新内容、新变动,大家一定要掌握解决问题的思路,死板学方法是行不通的,希望各位学习路上的初学者们不要放弃这一优美的框架,要不太可惜了!

    php入门到就业线上直播课:查看学习

    以上就是详解如何在Laravel9.x中快速安装Bootstrap的详细内容,更多请关注php中文网其它相关文章!

    声明:本文转载于:learnku,如有侵犯,请联系admin@php.cn删除

    前端(VUE)零基础到就业课程:点击学习

    清晰的学习路线+老师随时辅导答疑

    自己动手写 PHP MVC 框架:点击学习

    快速了解MVC架构、了解框架底层运行原理

    专题推荐:bootstrap Laravel
    上一篇:如何提高 Laravel 应用程序的速度 下一篇:自己动手写 PHP MVC 框架(40节精讲/巨细/新人进阶必看)

    相关文章推荐

    • ❤️‍🔥共22门课程,总价3725元,会员免费学• ❤️‍🔥接口自动化测试不想写代码?• Laravel扩展推荐:vite-plugin包利用 Vite 实现热重载• 6个Laravel Eloquent小技巧,助你提高代码可读性!• 一文了解Laravel中的Pipeline(管道)• 如何提高 Laravel 应用程序的速度
    1/1

    PHP中文网