LaravelでVue.js超入門 #Laravel

続き。
Laravelのデフォルトのpackage.jsonの中身にvueがいる。

package.json

"devDependencies": {
    "axios": "^0.16.2",
    "bootstrap-sass": "^3.3.7",
    "cross-env": "^5.0.1",
    "jquery": "^3.1.1",
    "laravel-mix": "^1.0",
    "lodash": "^4.17.4",
    "vue": "^2.1.10"
}

npm installしてみる。

うまくいった。

viewファイルをちょっといじる。
javascriptのソースコードを別のファイルに移動させる。

resources/view/sample.blade.php

<!DOCTYPE HTML>
<html>

<head>
  <title>Vue Sample</title>
</head>

<body>
  <sample id="test"></sample>
  <example id="app"></example>
</body>

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

</html>

mixヘルパを使うとresources/assets/配下をみる。よく知らない。
https://readouble.com/laravel/5.5/ja/helpers.html#method-mix

挙動を確かめるために以下のようにしてみる。
ここでvueのコンポーネントを読むらしい。ので追記。

resources/assets/js/app.js

Vue.component('example', require('./components/Example.vue'));
Vue.component('sample', require('./components/Sample.vue'));

const app = new Vue({
    el: '#app'
});

const sample = new Vue({
    el: '#test'
})

読み込むvueファイルを作る。
templateタグ、divタグがないと動かなかったのでそういうものらしい。
(ちゃんとドキュメントを読みましょう)

resources/assets/js/components/Sample.vue

<template>
  <div>
    this is test
  </div>
</template>

npm run devしてlocalhost:8000をみる。

Example.vueのコンポーネント(?)とSample.vueのコンポーネント(?)が表示された。