Laravel9.xにBootstrapを素早くインストールする方法を詳しく解説

Laravel 9.x にブートストラップ フレームワークをエレガントかつ簡単にインストールする (vite 記事)

この記事では、Laravel 9.x でフロントエンド ワークフローを使用した次の経験を共有します。以前はミックスしていましたが、今回は公式に推奨されている vite ツールを使用し、引き続き bootstrap 5 を使用します。これにより、コース受講者が最新のフロントエンド ワークフローを習得しやすくなるだけでなく、敷居を低くしてお気に入りのスタイルを調整することもできます。最も重要なことは、学習の進行状況やチュートリアルのリズムに影響を与えないことです。 [推奨: laravel ビデオ チュートリアル ]

前に書く

##開発環境:

#一般的な環境は Windows 10/11 Homestead で、どちらも最新の安定バージョンです
Node.js は両方のプラットフォームにインストールされます

• ##Laravel のバージョンは 9.x (投稿時には最新の 9.38.0 を使用しています)。言及されていないその他の点については、9.x バージョンのチュートリアルに従ってください。 Laravel Mix を使用せず、公式に推奨されている新しいフロントエンド パッケージング ツール vite を使用して、チュートリアルのスタイル変更タスクを完了します。

• 私の目的: Windows およびホームステッド プラットフォームで Node.js を使用して、Bootstrap のインストール時の落とし穴を回避し、勤勉な Windows ユーザーが「L01 Laravel チュートリアル - 4.2. 『Web 開発の実践入門』の「スタイルの美化」の章は洗練されており、簡単です。
• もうナンセンス、オンライン操作

操作方法

まず、読者は「4.2. オンライン操作」の章をすでに学習していることを前提としています。次に、私の Windows コンピューターとホームストレッド環境の両方で Node.js を実行できます。 Node.js が Windows にインストールされていない場合は、検索エンジンで検索してダウンロードできますが、インストール プロセスは簡単なので詳細は説明しません。

まず、チュートリアルに従って次の手順を実行しますが、まだ実行しないでください

composer require laravel/ui:3.4.5 --dev

ここでは、デフォルトの最新のlaravel/uiバージョンを直接取得して実行します。 linux

composer require laravel/ui  // 发文时最新的版本是 4.0.1，对不住了版主，我自己偷摸的上到最新的版本惹
php artisan ui bootstrap

次に、PowerShell などの Windows 環境でターミナルを開き、

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'),
       }
   },
});

次に、boostrap 5 の scss

import './bootstrap';

// 以下为新增部分
import '../sass/app.scss'
import * as bootstrap from 'bootstrap'

を app.js にインポートし、プロジェクトのブレード テンプレートに移動して、元の mix() コードを置き換えます。ここのチュートリアルに従う場合、default.blade.php ファイルを変更するだけで済みます。つまり、2 行のコード

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

を @vite コード

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

に置き換えるだけです。以下は次のとおりです。 mydefault.blade.php が配置されている位置

    
    @vite([&#39;resources/js/app.js&#39;])   <--- here!


    

        

            Weibo App
            

                
帮助
                
登录
            
        
    
    

        @yield('content')
    

では、後の検討では、Mix に関するものはすべてこの考え方に従って処理されます。

最後に、Windows ターミナルに次のコマンドを入力します。

npm run build
// 或者
npm run dev

操作が完了しました。次のブラウザを更新して効果を確認します。

dev と build の違いは次のとおりです:

dev は、開発に適したときにいつでも調整できます。変更はリアルタイムで自動的に有効になります。開発中は開いたままにすることをお勧めします。バックグラウンドでウィンドウをハングするだけです。

ビルドは 1 ステップで処理され、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

その後、ビルドしたファイルは git add -A で検出できます。

もちろん、オンラインでスタイルをコンパイルすることもできます。この考え方を理解していれば、1 つの例から推測することができます。

その他のヒント

bootstrap 5 では、バージョン 4 の元の Jumbotron コンポーネントが削除されているため、対応するスタイルが表示されませんが、これは正常です。変更したい場合は、想像力を働かせて自分で書いてください。

「4.4. ブラウザ キャッシュの問題」については、vite のフロントエンド ワークフローを使用する場合、ビルド完了後にサフィックスがスタイル ファイルに自動的に追加されるため、この章を無視して vite を使用できます。この問題はモデルには存在しないため、スキップして学習を続けてください。

この記事の中で、自分なりの方法を思いつくことができる箇所があれば、それがベストです。私の答えは完璧ではありません。皆さんが独自の方法を思いつくことができれば、それがベストです。学習プロセス中に、独立して考える質問や解決策を提示できるため、誰もが自分に合った解決策を模索することができます。 ＃＃＃＃＃＃＃＃＃最終的な考え＃＃＃＃＃＃

そして、特定のバージョンを使用してlaravelを学習できるモデレーターのチュートリアルの方法と比較しましたが、それでも私は公式ドキュメントの指示に従い、ネイティブメソッドを使用して関連する効果を実現し、最新バージョンを使用することを好みます。標準化の考え方に基づいた「反逆的で邪悪な方法」を推奨したいと思いますが、時折遭遇する新しいバージョンの互換性の問題も解決する必要があります。つまり、この記事が初心者に新しいアイデアを提供できれば幸いです。結局のところ、私たちは本番環境の開発ではなく学習段階にあるのです。学べば学ぶほど良くなります。

以前の 8.x 体験の共有と比較すると、今回は新しいテクノロジーの学習と適応に関するものであり、私も新しいバージョンのコンテンツを初めて見たときは困惑しました。自分で勉強し、解決策を見つけ、問題を解決します。方法を学ぶよりもアイデアを学ぶことが重要です。10.x と 100.x の新しいバージョンには、より多くの新しいコンテンツと変更が含まれると思います。誰もがアイデアをマスターする必要があります。問題を解決し、厳格になってしまうと、学習方法が機能しません。学習の旅に参加しているすべての初心者がこの美しいフレームワークを放棄しないことを願っています。それは残念です。

以上がLaravel9.xにBootstrapを素早くインストールする方法を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。