LaravelでVue.jsを使うための初歩の初歩
Vue.jsを使った画面出力までを行います
開発環境
- Laravel 7.16
- Node.js 10.21
- Docker 19.03
- CentOS 8.1
事前準備
念のためLaravelのバージョンを確認します
# php artisan --version Laravel Framework 7.16.1
Node.jsをインストールします
# dnf install -y nodejs
インストールに成功していれば、Node.jsとnpmのバージョンを以下のコマンドで表示できます。
# node -v v10.21.0 # npm -v 6.14.4
Vue開発の準備
Laravelのルートプロジェクトに移動し、laravel/uiパッケージをインストールします
# cd /path/to/laravel # composer require laravel/ui
laravel/uiが追加されているかを確認します
# cat composer.json | grep laravel/ui "laravel/ui": "^2.1"
Vue開発のための基本的な スカフォールド* を作成します。
* 足場という意味です。Vue開発のためのファイルを準備してくれます。
# php artisan ui vue
例として、vueファイルが作成されているかを確認します。
# cat resources/js/components/ExampleComponent.vue
依存パッケージをインストールします
# npm install
Vueファイルの画面表示
フロントエンドをビルドします
# npm run dev
vueファイルを表示するためのviewファイルを作成します
# vi /resources/views/example.blade.php <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Laravel</title> <link rel="stylesheet" href="{{ mix('/css/app.css') }}"> </head> <body> <div id="app"> <example-component></example-component> </div> <script src="{{ mix('/js/app.js') }}"></script> </body> </html>
作成したviewのルーティング設定をします
# vi /routes/web.php Route::get('example', function () { return view('example'); });
開発サーバーをlocalhostで立ち上げます
php artisan serve --host=0.0.0.0
ブラウザで表示を確認します
ただこのままだと、Vueファイルを追加・更新するたびにビルドする必要があります。 ホットリロードの設定はまたの機会に説明します。