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

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

藏色散人

リリース： 2022-11-18 21:04:15

転載

2238 人が閲覧しました

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

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

前に書く

##開発環境:

##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 &#39;vite&#39;;
import laravel from &#39;laravel-vite-plugin&#39;;
import path from &#39;path&#39;

export default defineConfig({
   plugins: [
       laravel([
           &#39;resources/js/app.js&#39;,
       ]),
   ],
   resolve: {
       alias: {
           &#39;~bootstrap&#39;: path.resolve(__dirname, &#39;node_modules/bootstrap&#39;),
       }
   },
});

ログイン後にコピー

次に、boostrap 5 の scss

import &#39;./bootstrap&#39;;

// 以下为新增部分
import &#39;../sass/app.scss&#39;
import * as bootstrap from &#39;bootstrap&#39;

ログイン後にコピー

を 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([&#39;resources/js/app.js&#39;])

ログイン後にコピー

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




    @yield('title', 'Weibo App') - Laravel 入门教程
    @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 サイトの他の関連記事を参照してください。