LaravelでVue.jsを使う
今までLaravelとVue.jsを別々に勉強してきたけど、実際どうやって2つを組み合わせて１つのアプリをつくるのかは知らなかったから備忘録として残しておく。 今回は、この間やっと理解したHTTPクライアントのaxiosを使ってみる。
LaravelからVue.js・axiosを使う方法
実は、Laravelにはもともとpackage.jsonにVue.jsとaxiosが記述されている。
だから、
$npm install
とだけ入力すればnpmリポジトリからライブラリをダウンロードしてくれる！！
その後、
$npm run dev
で/public/css/app.cssと/public/js/app.jsが作成され、package.json内に書かれたシェルスクリプトを実行する
※Laravelのpackage.jsonには、bootstrap-sassのver.3.3.7がインストールされるように記述されている
app.js、app.cssは更新する度に$npm run devする。
この方法はローカルインストールといって、対象のプロジェクトのみで使用可能なやり方。
npmってなんだろう
npm = Node Package Manager Node.jsのモジュールを管理するツール。
package.json npｍでインストールしたパッケージのバージョン情報を格納する場所。
つまり、 package.jsonに書いてある内容を元にしてLaravelは何を使うかを決める！ で、npmコマンドで指示する！
package.jsonがなかったら・・・
因みに、Laravel以外でVue.jsを使うときはpackage.jsonがないかもしれないから自分で用意する！ そのやり方をメモしておく。
npmのバージョンを確認（npmコマンドが使えるかの確認も兼ねて）
$npm —versionpackage.jsonに使いたい情報を記述
プロジェクトのルートディレクトリで $npm install package.jsonに記載されたパッケージがインストールされる
実際につくってみる
今回はこちらのサイトを参考にしてアプリをつくってみました。
基本的に上記のブログを参考にすればできるのですが、自分でやっていてわかりにくかったところだけ残しておきます。
先程も記載しましたが、
$npm run dev
コマンドによってできるのは
- /public/css/app.css
- /public/js/app.js
の2つです。
中を覗くとわかるのですが、めちゃめちゃ行数が多い。
この２つのファイルを読み込むために welcome.blade.phpの中に書き込んでいきます。
headタグ内に
<link rel="stylesheet" href="{{ asset('css/app.css') }}">
bodyタグ内に
<script src="{{ asset('js/app.js') }}"></script>
を追加します。 そうすることで読み込めるようになります。
肝心のVue.jsとaxiosのコードを記述するのはresources/assets/js/app.jsです。 /public/js/app.jsとは違うので注意！！
また、ブラウザはFireFoxを使用していたのですが、FireFoxだとなぜかタスクの追加が出来ませんでした。 Chromeで再度試したところ出来ました！
なんとなくだけどVue.jsとLaravelの関係がわかってきたから、次はコード丸パクリではなくオリジナルのアプリをつくって見ようと思う。 個人的に、Vue.jsでマークダウンエディタが簡単に実装できることに感動したから、マークダウン形式で書ける保存可能なメモ帳アプリを作ってみる予定。あるあるだけど・・・
つくったらまたブログ書きます。
