首頁 > php框架 > Laravel > 主體

詳解如何在Laravel9.x中快速安裝Bootstrap

藏色散人
發布: 2022-11-18 21:04:15
轉載
2198 人瀏覽過

在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 檔案即可,即將其中的這兩行程式碼

<link rel="stylesheet" href="{{ mix(&#39;css/app.css&#39;) }}">
<script src="{{ mix(&#39;js/app.js&#39;) }}"></script>
登入後複製

全部換成@vite 程式碼

@vite([&#39;resources/js/app.js&#39;])
登入後複製

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




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


    
    
@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 版本也會有更多新內容、新變動,大家一定要掌握解決問題的思路,死板學方法是行不通的,希望各位學習路上的初學者們不要放棄這優美的框架,要不太可惜了!

以上是詳解如何在Laravel9.x中快速安裝Bootstrap的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:learnku.com
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板