Laravel 5.6 + Vue.js で、SPA開発(1) 準備編 #Laravel #vue.js #SPA

index:

概要:
SPA(SinglePageApplication) 構成で、Laravel 5 +vue.js
の開発 、準備編となります。

環境とか

php7.1
Laravel 5.6
Vue.js
vue-router
node.js
npm

準備

古めですが、Laravel5.6です。
適当な、プロジェクト名を決めて、作成します。

php.exe composer.phar create-project --prefer-dist laravel/laravel spa1 "5.6.*"
cd spa1

・package.json
vue-router を追加します。

{
    "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",
        "popper.js": "^1.12",
        "cross-env": "^5.1",
        "jquery": "^3.2",
        "laravel-mix": "^2.0",
        "lodash": "^4.17.4",
        "vue": "^2.5.7",
        "vue-router": "^2.3.0"
    }
}

npm install
npm run watch

・Laravel の起動
php.exe artisan serve

・ブラウザで、http://localhost:8000/
で、ページが開けます。