Laravel5.4でVue.jsを使う準備

依存パッケージを入れる

まずはnpm installで依存パッケージを入れる

npm install

コンパイル

npm run dev

$ npm run dev

> npm run development


> cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js

 95% emitting

 ERROR  Failed to compile with 2 errors

 error  in ./resources/assets/sass/app.scss

Module build failed: Error: ENOENT: no such file or directory, scandir '/home/service/cocoa/node_modules/node-sass/vendor'

node-sassがないと言われたのでインストール
npm install node-sass

再チャレンジ
npm run dev

 DONE  Compiled successfully in 4712ms

                                                                                                    Asset     Size  Chunks                    Chunk Names
  fonts/vendor/bootstrap-sass/bootstrap/glyphicons-halflings-regular.eot?f4769f9bdb7466be65088239c12046d1  20.1 kB          [emitted]
fonts/vendor/bootstrap-sass/bootstrap/glyphicons-halflings-regular.woff2?448c34a56d699c29117adc64c43affeb    18 kB          [emitted]
 fonts/vendor/bootstrap-sass/bootstrap/glyphicons-halflings-regular.woff?fa2772327f55d8198301fdb8bcfc8158  23.4 kB          [emitted]
  fonts/vendor/bootstrap-sass/bootstrap/glyphicons-halflings-regular.ttf?e18bbf611f2a2e43afc071aa2f4e1512  45.4 kB          [emitted]
  fonts/vendor/bootstrap-sass/bootstrap/glyphicons-halflings-regular.svg?89889688147bd7575d6327160d64e760   109 kB          [emitted]
                                                                                               /js/app.js   1.2 MB       0  [emitted]  [big]  /js/app
                                                                                             /css/app.css   147 kB       0  [emitted]         /js/app

今度は成功。

Vueコンポーネントの表示

デフォルトで用意されているコンポーネントを利用する
resources/assets/js/components/Example.vue

resorces/assets/js/app.js

...

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

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

デフォルトでexampleコンポーネントがVueに設定されていて、IDがappの要素に登録されている。

とりあえず表示してみる。

<div id="app">
    <example></example>
</div>

ビューの適当なところに入れて表示してみる。

表示されーた。