この内容は古いバージョンです。最新バージョンを表示するには、戻るボタンを押してください。
バージョン:1
ページ更新者:T
更新日時:2019-07-24 19:39:41

タイトル: vue.js
SEOタイトル: 【Laravel】vue.jsとの連携

※記載途中

 

nodeのインストール

Laravelプロジェクト直下で以下のコマンドを実行する。

npm install

 

Vue.js関連のjsの読み込み

Vue.js関連の記述があるapp.jsを読み込む。

<script src="{{ asset('js/app.js') }}"></script>

 

id="app" の追加

Vue.jsに必要なapp idをbodyタグ直下に追加する。(デフォルトでレイアウトに定義されているはず)

<body>

    <div id="app">
    
        ...
    
    </div>

</body>

 

vue-routerのインストール

SPA(Single Page Application)を作成する場合はvue-routerをインストールする。

npm install vue-router

 

開発サーバーの起動

以下の2つコマンドが必要。

別窓のコマンドラインを開いて同時に実行させておく。

php artisan serve

npm run hot