どうも、 トレーニング後にビールを 飲んでしまう@version1です。
今回は、 そろそろ勉強のために、 JqueryでなくAngular, React, Vueらへん 使って見ようかということ でvue.jsをlaravelにインストールしてみました。
数あるjavascriptライブラリの 中でvue.jsを選んだ理由は 特になく、なんとなく なのですが強いて言うのであれば、 今からやるのであれば後発の新しいライブラリを 使いたいと言うところでした。
以下、Googleトレンドで他ライブラリとの 検索の割合調べてみた画像。
検索数も伸びてますね。 後発だけに他ライブラリの課題を見事に解決しているとか いないとか
まずはライブラリのインストール
インストールの方法はこちらから
最初に触ってみる程度であれば CDNでの読み込みが一番早いので、 htmlのヘッダ部に下記を追加してしまうのが早いです。
<script src="https://unpkg.com/vue"></script>
が、 これだとライブラリがアップデートされると アプリが使うライブラリのバージョンも変わってしまうので、 ダウンロードリンクから直接 ライブラリをダウンロードして配置します。
開発版と本番版があるようなので 両方ダウンロードしてpublic/jsに
public/js/vue.js (開発版）
public/js/vue.min.js (本番版）
を配置します。
ヘッダ部分は以下のようにして、 .envのAPP_DEBUGの値を元に読み込むライブラリを 変えるようにしましょう。
@if (env('APP_DEBUG'))
<script src="{{ asset('js/vue.js') }}"></script>
@else
<script src="{{ asset('js/vue.min.js') }}"></script>
@endif
Hello Worldしてみる 〜 Bladeとのコンフリクト解消方も ~
上のような設定が終わっていれば 下記のようにすればHello Vue! という文字が表示されるので 導入完了です！
※注意※
Laravelでbladeを使っている場合は、 {{}}のMastache記法がコンフリクトして、 Vueのテキスト表示がPHPに解釈されエラーとなってしまいます。
blade + vueの場合は blade（PHP)の式を書く場合 -> {{}}で囲う vueの式を書く場合は、 -> {{}} の前に@を表示する
ようにしてください。
<!DOCTYPE html>
<head>
<title>Sample</title>
<link href="{{ asset('css/reset.css') }}" rel="stylesheet">
<link href="{{ asset('css/style.css') }}" rel="stylesheet">
@if (env('APP_DEBUG'))
<script src="{{ asset('js/vue.js') }}"></script>
@else
<script src="{{ asset('js/vue.min.js') }}"></script>
@endif
</head>
<body>
<div class="container" id="app">
@{{ message }}
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
</script>
</body>
</html>
以上です。
↓ここではVue.jsでできたアプリを試せますので是非
https://jp.vuejs.org/v2/examples/
