ブートストラップ5とVue 3をインストールする方法.

このチュートリアルでは、ブートストラップ5とVueをインストールする方法を示します.Laravelの上のJS 3.
ブートストラップは世界で最も人気のあるCSSフレームワークであり、Vue 3はファイルサイズが小さく、良いタイプスクリプトをサポートしています.

ステップ1 : Laravelプロジェクトを作成する

laravel new Project_name

Step 2 : Laravel / UIのインストール

Laravel UIは、定義済みのUIコンポーネントが付属している公式ライブラリです.
laravel/uiをインストールしてコマンドを実行します.

composer require laravel/ui

ステップ3：LALAVELでブートストラップ5をインストールします

この手順では、私と同じ順序でコマンドをフォローアップし、コマンドのいずれかのコマンドをスキップしないでください.

php artisan ui bootstrap

このコマンドがブートストラップ4をインストールするのに気がつくかもしれません、あなたがそれを走らなければならない理由は、あなたがブートストラップ5をインストールすることと比較してあなた自身でそれをする必要がないように、それがあなたのために多くのことをセットアップするということです.
ブートストラップのバージョンをブートストラップ5に切り替えます.

Note that you should run both this commands on the same order so you wont get any issues.

npm install bootstrap@next @popperjs/core --save-dev

npm install bootstrap @popperjs/core --save-dev

次に、

npm install
npm run dev

あなたがフォローアップするならば、あなたはLALAVELプロジェクトにうまくインストールされるブートストラップ5を持っています.ブートストラップのバージョンがプロジェクトにインストールされているかどうか確認できますpackage.json ファイル.

"devDependencies": {
        "@popperjs/core": "^2.9.2",
        "axios": "^0.21",
        "bootstrap": "^5.0.1",
        "jquery": "^3.6",
        "laravel-mix": "^6.0.6",
        "lodash": "^4.17.19",
        "popper.js": "^1.16.1",
        "postcss": "^8.1.14",
        "resolve-url-loader": "^3.1.2",
        "sass": "^1.32.11",
        "sass-loader": "^11.0.1"
    }

ブートストラップは正常にインストールされます.

ステップ4：ラウヴィエルでVue 3をインストールする

前のステップと同様に、VEE 2をLALAVEL/UIを使用してインストールします.

php artisan ui vue

Vue 3をVue 3に切り替えます.

npm install --save vue@next && npm install --save-dev vue-loader@next

then,

npm install
npm run dev

レッツチェックpackage.json 再び.

"devDependencies": {
        "@popperjs/core": "^2.9.2",
        "@vue/compiler-sfc": "^3.0.11",
        "axios": "^0.21",
        "bootstrap": "^5.0.1",
        "jquery": "^3.6",
        "laravel-mix": "^6.0.6",
        "lodash": "^4.17.19",
        "popper.js": "^1.16.1",
        "postcss": "^8.1.14",
        "resolve-url-loader": "^3.1.2",
        "sass": "^1.32.11",
        "sass-loader": "^11.0.1",
        "vue": "^3.0.11",
        "vue-loader": "^16.2.0",
        "vue-template-compiler": "^2.6.12"
    }

おめでとう!これで、ブートストラップ5とVUE 3をLALAVELプロジェクトにインストールしました.
最後に、あなたがVue 3とブートストラップ5を使用して私のスターターlaravel 8プロジェクトを使用することができることに言及したい.
⭐ The Github repository!
~ Simodev