4日目: LaravelでVueコンポーネントを読み込んでみるところまで

以下のようなフロントエンド環境をがほしい。

まずcss / jsのコンパイル環境ほしい。
uglifyやってほしい。
source-mapやってほしい。
ES6やりたい。
いい感じにbabelってほしい。
vuex使ってみたい。

これらが何も考えなくてもとりあえずlaravelを入れたことでいきなり揃う。
laravel elixirとかの使い方については正直現時点で興味の外で、vue.jsを触ってみたいから手っ取り早くlaravelを使ってみている。細かい調整はあとから付け足していくつもり。

では早速vue.jsを使ってみる。vue.jsのバージョンは 2.0.1 を用いる。

laravelのデフォルトで入っているBladeというテンプレートエンジンで記述されてるwelcome.blade.phpを書き換えて、vueのスクリプトを読むだけのやつを書いた。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <script src="https://unpkg.com/vue/dist/vue.js"></script>
        <title>Vue Test</title>
    </head>
    <body>
    @verbatim
        <div class="container">
            Hello, {{ name }}.
        </div>
    @endverbatim

    <script>
        var app = new Vue({
          el: '.container',
          data: {
            name: 'Vue'
          }
        })
    </script>

    </body>
</html>

homesteadを立ち上げておけば http://192.168.10.10/ で、"Hello, Vue." というものが表示されることは確認できた。

次に vuex を使いたいので

laravel.com

のWriting Vue Componentsを参考にvueコンポーネントを読み込めるようにする。

php artisan make:auth でvueコンポーネントの読み込みに必要な home.blade.php が作成されるので、 home.blade.phpを

@extends('layouts.app')

@section('content')
    <example></example>
@endsection

に書き換える。さらにログイン機能は今いらないので、routes/web.php でいきなりhome.blade.phpを読み込むように

 Route::get('/', function () {
-    return view('welcome');
+    return view('home');
 });

に書き換えた。ここまできて gulp を実行する。

github.com

上記エラーに遭遇したので、 yarn update でパッケージをアップデートし、gulpを再実行すると

$ gulp
[10:31:09] Using gulpfile ~/open-kamattechan-php/gulpfile.js
[10:31:09] Starting 'all'...
[10:31:09] Starting 'sass'...
[10:31:12] Finished 'sass' after 3.27 s
[10:31:12] Starting 'webpack'...
[10:31:16]
[10:31:16] Finished 'webpack' after 3.96 s
[10:31:16] Finished 'all' after 7.25 s
[10:31:16] Starting 'default'...
┌───────────────┬───────────────────────────────┬────────────────────────────────┬────────────────────┐
│ Task          │ Summary                       │ Source Files                   │ Destination        │
├───────────────┼───────────────────────────────┼────────────────────────────────┼────────────────────┤
│ mix.sass()    │ 1. Compiling Sass             │ resources/assets/sass/app.scss │ public/css/app.css │
│               │ 2. Autoprefixing CSS          │                                │                    │
│               │ 3. Concatenating Files        │                                │                    │
│               │ 4. Writing Source Maps        │                                │                    │
│               │ 5. Saving to Destination      │                                │                    │
├───────────────┼───────────────────────────────┼────────────────────────────────┼────────────────────┤
│ mix.webpack() │ 1. Transforming ES2015 to ES5 │ resources/assets/js/app.js     │ public/js/app.js   │
│               │ 2. Writing Source Maps        │                                │                    │
│               │ 3. Saving to Destination      │                                │                    │
└───────────────┴───────────────────────────────┴────────────────────────────────┴────────────────────┘
[10:31:16] Finished 'default' after 12 ms

なんかできたっぽさがある。

http://192.168.10.10/ を見ると

f:id:kimikimi714:20161120200120p:plain