LaravelとVue.jsでクイズアプリを作る

laravelでvue.jsを使うためのセッテイング

laravelをinstallしたら最初からpackage.jsonが用意されていてnpm installするとvue.jsも使えるようになる

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
{
"private": true,
"scripts": {
"dev": "npm run development",
"development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch": "npm run development -- --watch",
"watch-poll": "npm run watch -- --watch-poll",
"hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
"prod": "npm run production",
"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
}
,

"devDependencies": {
"axios": "^0.18",
"bootstrap": "^4.0.0",
"cross-env": "^5.1",
"jquery": "^3.2",
"laravel-mix": "^2.0",
"lodash": "^4.17.5",
"popper.js": "^1.12",
"vue": "^2.5.7"
}

}

vue.jsに関しては^2.5.7というバージョンが指定されている。

キャレットについては下記を参照のこと
package.jsonのパッケージバージョンに記載される ^ (キャレット) とは?どうしてつくのか?

dockerでの開発を想定しているが
jsのpackageのinstallやwatch,buildなどはホスト側で実行する

1
$ npm install

npm installしたところvueのバージョンはこの時点での最新バージョンである2.5.19がインストールされていた

vuexも必要なのでinstallしておく

1
$ npm install vuex --save

vue-routerも必要なのでinstallしておく

1
$ npm install vue-router --save

開発をはじめる

まずは、クイズアプリで使用するresources/js/app.js,resources/sass/quiz.scssを作成しよう。
作成したらそれをwebpack.mix.jsに追加します。

1
2
3
4
5
6
7
mix.js('resources/js/app.js', 'public/js')
.js('resources/js/quiz.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css')
.sass('resources/sass/quiz.scss', 'public/css');
```

次のコマンドでファイルの変更を監視しながら開発できます

$ npm run watch

1
2

`resources/js/quiz.js`を作成

/**

  • First we will load all of this project’s JavaScript dependencies which
  • includes Vue and other libraries. It is a great starting point when
  • building robust, powerful web applications using Vue and Laravel.
    */

require(‘./bootstrap’);

window.Vue = require(‘vue’);

import App from ‘./components/quiz/App.vue’;

new Vue({
render: h => h(App),
}).$mount(‘#app’);

1
2

`resources/js/components/quiz/App.vue`を作成


1
2
3
4
5
6

`app/Http/Controllers/QuizController.php`を用意する



`routes/web.php`に下記のルーティングを追加

Route::get(‘/quiz’, ‘QuizController@index’)->name(‘quiz-index’);
```