はじめに
プロジェクトでVue.jsを使用する必要があり、Laravel UIパッケージを使用してVue.jsをインストールする手順を調査しました。この記事では、LaravelでVue.jsをLaravel UIを使ってインストールする方法を備忘録としてまとめました。
さいごに簡単な確認問題を用意しています。
この記事がもしよければ、内容の確認として是非お試しください！
インストール手順
1.Laravelプロジェクトのルートディレクトリに移動します。
cd [プロジェクト名]
2.コマンドラインで以下のコマンドを実行して、Laravel UIパッケージをインストールします。
composer require laravel/ui
3.インストールが完了したら、以下のコマンドを実行してVue.jsをインストールします。
php artisan ui vue
4.インストール中に質問が表示される場合は、適切な選択肢を選んで進めてください。通常は「Use npm to install dependencies」というオプションを選択します。
5.インストールが完了したら、以下のコマンドを実行して必要なリソースを生成します。
npm install && npm run dev
６.BladeファイルにVue.jsのコンポーネントを表示させるために、resources/viewsディレクトリ内の適当なBladeファイルを開き、以下のコードを追加します。
<div id="app">
<example-component></example-component>
</div>
７.CSSとJavaScriptファイルをBladeファイルに読み込むために、Bladeファイルの
セクション内に以下のコードを追加します。<link href="{{ asset('css/app.css') }}" rel="stylesheet">
<script src="{{ asset('js/app.js') }}"></script>
8.ブラウザでアプリケーションを実行し、Vue.jsのコンポーネントが正常に表示されていれば、成功です。
以上で、LaravelプロジェクトにVue.jsをLaravel UIを使ってインストールし、Bladeファイルでコンポーネントを表示させる手順とapp.css/app.jsの読み込み方法は完了です。
まとめ
この記事では、LaravelでVue.jsをLaravel UIを使ってインストールし、さらにBladeファイルでコンポーネントを表示させる方法とapp.css/app.jsの読み込み方法を紹介しました。プロジェクトでの導入時に参考にしていただければ幸いです。
さいごに
簡単な確認問題を用意しました。
この記事がもしよければ、内容の確認として是非お試しください！