LaravelプロジェクトにVue.jsを導入する

前提

この記事は、Laravelのローカル開発環境構築(Mac)の続編でローカル開発環境(mac)にLaravelをインストールした後に、Vue.jsを導入する方法を記載しています。

nodeとnpmのバージョンを確認する

$ node -v
$ npm -v

※nodeとnpmがインストールされていない場合は、こちらで

Vueインストール

Laravelをインストールすると、そのディレクトリにあるpackage.jsonにてすでにvueが記載されているので、[npm install]をするとすぐにVue.jsが使用可能です。

$ npm install

Vueファイルのコンパイルとインポート

Laravelにはもともと、Vue.jsのファイルがあり(resources/assets/js/app.js)、それをコンパイルして読み込むことが可能です。

コンパイル

どちらかを実行します。 ※開発中であれば[npm run dev]で本番用であれば、[npm run prod]を実行します。 違いは[/Users/admin/MovieBooklet/public/js/app.js]がminifyされるかどうかです。

$ npm run dev  # コンパイル
$ npm run prod # コンパイル後minify

インポート

resources/views/welcome.blade.phpのbodyタグ内の一番下に下記コードを 記述します。

<div id="app">
    <example-component></example-component>
</div>
<script src="/js/app.js"></script>

Vue実行

サーバーを起動し、ブラウザで確認してみます。

$ php artisan serve

おすすめ記事
© 2016-2017 Fridles All Rights Reserved.