まとめ
<php> 要素 (PHP INI 項目や定数、グローバル変数の設定) では、既存の環境変数は上書きされない。上書きしたいならば、 force 属性を使う。
ドキュメントはこちら。といいますか、 phpunit.xml で検索して最初のページでした。
まとめ
2021年5月4日現在、 Dropzone.js を Vue.js から簡単に使えるようにするためのライブラリの状況は、
- rowanwins/vue-dropzone: A Vue.js component for Dropzone.js – a drag’n’drop file uploads utility with image previews はインストールできたがエラーで使えなかった。
- Yaxian/vue3-dropzone: HTML5 drag-drop zone with vue3 は使えた。
環境
- Laravel 6 上の Vue.js 3 の SPA
- Laravel 6 、 Vue.js 3 のプロジェクトに Vue.js のルートとなるシングルファイルコンポーネント (SFC) を指定するメモ – oki2a24 の続き
まとめ
- 本投稿は Laravel 6 、 Vue.js 3 のプロジェクトに Vue Router を追加するメモ – oki2a24 の続きである。
createAppの引数に Vue.js のルートとなるシングルファイルコンポーネント (SFC) を指定すればよい。- ファイルの構成は Vue Cli で Vue Router 付きで作成したプロジェクトを参考にした。
- ルートとなる SFC は
App.js - Vue Router ファイルは
router/index.js
- ルートとなる SFC は
まとめ
- 本投稿は Laravel 6 、 Vue.js 3 が入っただけの状態から、最初の SPA ページを用意するためにやること – oki2a24 の続きとなります。
npm install --save-dev vue-router@4でインストール- Vue Router を動かすだけの簡単なサンプルを、 Getting Started | Vue Router をほぼそのまま使って作り、動作確認
仕組み
laravel/routes/web.phpがリクエストを受け付ける。このとき、どんな URL でも 1 つの Blade ビューを返すように設定する。- 返された Blade ビューに記述しておいた
<div id="app"></div>や<script src="{{ mix('/js/app.js') }}"></script>などにより、 Vue.js を使えるようになる。
本投稿は、 Laravel 6 で Vue.js 3 を使えるようにするまでの試行錯誤の記録 – oki2a24 の続きに当たります。
方針のまとめ
.eslintrc.jsの extends について- Vue.js に関するルールは
plugin:vue/vue3-recommendedに任せる。 - 他のルールは
eslint:recommendedに任せる。 - Prettier との競合を避けるために
prettierを使う。
- Vue.js に関するルールは
- ESLint と Prettiier は別々に実行する。
導入作業のまとめ
- 依存パッケージの追加 →
npm install --save-dev eslint eslint-config-prettier eslint-plugin-vue prettier .eslintrc.jsmodule.exports = { root: true, env: { node: true, }, extends: [ "plugin:vue/vue3-recommended", "eslint:recommended", "prettier", ], rules: {}, };- .prettierrc
{ "tabWidth": 2, } package.jsonへの追加内容$ git diff laravel/package.json diff --git a/laravel/package.json b/laravel/package.json index ce4fa08..0cc621e 100644 --- a/laravel/package.json +++ b/laravel/package.json @@ -7,7 +7,9 @@ "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 --disable-host-check --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 --config=node_modules/laravel-mix/setup/webpack.config.js" + "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --config=node_modules/laravel-mix/setup/webpack.config.js", + "lint": "eslint --ext .js,.vue --fix --ignore-path .gitignore resources/", + "format": "prettier --write --ignore-path .gitignore resources/**/*.{js,vue}" }, "devDependencies": { "@vue/compiler-sfc": "^3.0.11", $
まとめ
- Vue.js 3 を
npm --save-dev vue@nextでインストールした。 - laravel-mix のバージョンを最新にする必要があり、それは
npm audit fix --forceで自然とそうなった。 - vue-loader もバージョンを合わせる必要があり、そのバージョンは 16 で、インストール時の指定は、
npm install --save-dev npm-loader@nextだった。 resources/js/app.jsで Vue.js 3 の方法で初期化すれば良い。- Blade テンプレートファイルで Vue.js 3 を読み込むには、
<div id="app"></div>と<script src="js/app.js"></script>を書けば良い。 - 後日追記
カスタマイズ導入方法まとめ
- Vue.js 3 に Bootstrap 5 を組込む手順メモ – oki2a24 の続きであることが前提。
yarn add sass-loader@^10 sassで依存パッケージをインストールします。ここで@^10とバージョンを指定しているのは、最新版をインストールするとビルド時にエラーが発生したため。公式ドキュメントにも注釈がある。→ Working with CSS | Vue CLIsrc/scss/custom.scssを作成し、@import "node_modules/bootstrap/scss/bootstrap";を記述する。カスタマイズ内容は、この行よりも上に書くこと。src/main.jsにimport "@/scss/custom.scss";を記述しcustom.scssを読み込む。今まで読み込んできた素の Bootstrap であるimport "bootstrap/dist/css/bootstrap.min.css";行は不要となるので削除する。
まとめ
yarn add bootstrap@next @popperjs/coresrc/main.jsに次を追加する。import "bootstrap"; import "bootstrap/dist/css/bootstrap.min.css";