laravelスカフォールド?
公式をみてみるとlaravelのフロントエンドでbootstrap、vueやreactなどを導入するための仕組みのようです。
今回はこれを使って、vueを導入してみました。
laravelはvertion6で確認しています。
使ってみる
laravel/uiをインストール
laravel/uiを使うと、それぞれの機能を導入できるようになるようです。
composerでインストールします。
composer require laravel/ui:^1.0 --dev
インストールするとcomposer.lockに変更がかかって、入ったことが確認できます。
vueインストール
下記のコマンドでvueインストールします
コマンドを実行すると即座にファイルを作ってくれます。
php artisan ui vue
変更があるファイルが下記になります。
package.json
webpack.mix.js // フォーマットされただけ
resources/js/app.js // vueがrequireされて、サンプルのvueファイルがコンポーネント化定義されている
resources/js/bootstrap.js // jqueryとbootstrapがロードされてる?
resources/sass/app.scss // cssファイルインポート
下記のファイルが新規に作成されます。
resources/js/components/ExampleComponent.vue // サンプルのvueファイル
resources/sass/_variables.scss
package.jsonをみると下記が追加されてます。
"devDependencies": {
"axios": "^0.19",
+ "bootstrap": "^4.0.0",
"cross-env": "^5.1",
+ "jquery": "^3.2",
"laravel-mix": "^4.0.7",
"lodash": "^4.17.13",
+ "popper.js": "^1.12",
"resolve-url-loader": "^2.3.1",
- "sass": "^1.15.2",
- "sass-loader": "^7.1.0"
+ "sass": "^1.20.1",
+ "sass-loader": "^8.0.0",
+ "vue": "^2.5.17",
+ "vue-template-compiler": "^2.6.10"
}
jqueryとかbootstrapも入ってますね🤯
npm installを実行する
package.jsonに追加されたライブラリをnpmコマンドでインストールします。
npm install
npm run devでビルドする
下記コマンドでビルドします。
npm run dev
下記ファイルが新規で作成されます。
このビルドしたファイルを読み込んで使います。
public/mix-manifest.json
public/css/app.css
public/js/app.js
ビルドエラーになったら
npm run devでビルドするときに下記のエラーになりました😓
ERROR in ./resources/sass/app.scss
Module build failed (from ./node_modules/css-loader/index.js):
ModuleBuildError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
ValidationError: Invalid options object. Sass Loader has been initialized using an options object that does not match the API schema.
- options has an unknown property 'outputStyle'. These properties are valid:
object { implementation?, sassOptions?, prependData?, sourceMap?, webpackImporter? }
at validate (/var/www/html/poc-laravel6/node_modules/schema-utils/dist/validate.js:88:11)
at Object.loader (/var/www/html/poc-laravel6/node_modules/sass-loader/dist/index.js:36:28)
at runLoaders (/var/www/html/poc-laravel6/node_modules/webpack/lib/NormalModule.js:316:20)
at /var/www/html/poc-laravel6/node_modules/loader-runner/lib/LoaderRunner.js:367:11
at /var/www/html/poc-laravel6/node_modules/loader-runner/lib/LoaderRunner.js:233:18
at runSyncOrAsync (/var/www/html/poc-laravel6/node_modules/loader-runner/lib/LoaderRunner.js:143:3)
at iterateNormalLoaders (/var/www/html/poc-laravel6/node_modules/loader-runner/lib/LoaderRunner.js:232:2)
at /var/www/html/poc-laravel6/node_modules/loader-runner/lib/LoaderRunner.js:205:4
at process.nextTick (/var/www/html/poc-laravel6/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:85:15)
at process._tickCallback (internal/process/next_tick.js:61:11)
@ ./resources/sass/app.scss
ERROR in ./resources/sass/app.scss (./node_modules/css-loader??ref--5-2!./node_modules/postcss-loader/src??postcss0!./node_modules/resolve-url-loader??ref--5-4!./node_modules/sass-loader/dist/cjs.js??ref--5-5!./resources/sass/app.scss)
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
ValidationError: Invalid options object. Sass Loader has been initialized using an options object that does not match the API schema.
- options has an unknown property 'outputStyle'. These properties are valid:
object { implementation?, sassOptions?, prependData?, sourceMap?, webpackImporter? }
at validate (/var/www/html/poc-laravel6/node_modules/schema-utils/dist/validate.js:88:11)
at Object.loader (/var/www/html/poc-laravel6/node_modules/sass-loader/dist/index.js:36:28)
@ ./resources/sass/app.scss 2:14-253
下記コマンドでsass-loaderのバージョンを7にすると解決しました。
npm uninstall --save-dev sass-loader
npm install --save-dev sass-loader@7.1.0
こちらが参考になりました。
welcome.blade.phpを修正してみる
ここまでの手順で、使えるようになったのでwelcome.blade.php(最初から入っているトップページblade)を下記のように修正して
トップページにアクセスしてみます。
<div id="app">
<example-component></example-component>
</div>
<script src="{{ asset('js/app.js') }}"></script>
<link rel="stylesheet" href="{{ asset('css/app.css') }}">
修正内容としては、php artisan ui vue
コマンドを実行した時に作成されたExampleComponent.vueを表示するように定義しています。
動作確認
追加されたvueファイルの内容が表示されました。
デバッグのconsoleタグで確認すると、vueのmountedメソッドが動いていますね…!
意外とすんなり行きましたね…(エラー出たけど…)
次回、vue-routerを入れてみたりしたいと思います。
コメント