にきブロ

Webエンジニアによる雑記です

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

ブラウザで表示を確認します f:id:takaharu_niki:20200705212105p:plain

ただこのままだと、Vueファイルを追加・更新するたびにビルドする必要があります。 ホットリロードの設定はまたの機会に説明します。