Vue.jsをLaravel uiでインストールする方法をまとめてみた*確認問題つき

はじめに

プロジェクトで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ファイルを開き、以下のコードを追加します。

resources/views/example.blade.php

<div id="app">
    <example-component></example-component>
</div>

７.CSSとJavaScriptファイルをBladeファイルに読み込むために、Bladeファイルの

セクション内に以下のコードを追加します。

resources/views/example.blade.php

<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の読み込み方法を紹介しました。プロジェクトでの導入時に参考にしていただければ幸いです。

さいごに

簡単な確認問題を用意しました。
この記事がもしよければ、内容の確認として是非お試しください！