まとめ
- 本投稿は Laravel 6 、 Vue.js 3 が入っただけの状態から、最初の SPA ページを用意するためにやること – oki2a24 の続きとなります。
npm install --save-dev vue-router@4
でインストール- Vue Router を動かすだけの簡単なサンプルを、 Getting Started | Vue Router をほぼそのまま使って作り、動作確認
Linux の悪戦苦闘記、プログラミング、WordPress、ウェブサービス、Windows、Mac などの話題ですの。
npm install --save-dev vue-router@4
でインストールlaravel/routes/web.php
がリクエストを受け付ける。このとき、どんな URL でも 1 つの Blade ビューを返すように設定する。<div id="app"></div>
や <script src="{{ mix('/js/app.js') }}"></script>
などにより、 Vue.js を使えるようになる。本投稿は、 Laravel 6 で Vue.js 3 を使えるようにするまでの試行錯誤の記録 – oki2a24 の続きに当たります。
.eslintrc.js
の extends について
plugin:vue/vue3-recommended
に任せる。eslint:recommended
に任せる。prettier
を使う。npm install --save-dev eslint eslint-config-prettier eslint-plugin-vue prettier
.eslintrc.js
module.exports = {
root: true,
env: {
node: true,
},
extends: [
"plugin:vue/vue3-recommended",
"eslint:recommended",
"prettier",
],
rules: {},
};
{
"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",
$
npm --save-dev vue@next
でインストールした。npm audit fix --force
で自然とそうなった。npm install --save-dev npm-loader@next
だった。resources/js/app.js
で Vue.js 3 の方法で初期化すれば良い。<div id="app"></div>
と <script src="js/app.js"></script>
を書けば良い。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/core
src/main.js
に次を追加する。import "bootstrap";
import "bootstrap/dist/css/bootstrap.min.css";
ページの検索フォームに入力して検索ボタンをクリックすると AJAX で検索用 API を実行する。この時に、検索パラメータを URL のクエリパラメータとして URL へ反映することはできるのか?
また、ブラウザでの戻る、進むをクリックした時も、検索結果をページに表示するのはもちろん、 URL クエリ引数や検索フォームに検索キーワードを反映させたい。
以下、 Vue.js 2 (Options API) での勘所です。 Compotision API でもポイントは同じで、メソッドを適宜置き換えてください。どちらの実装例も本記事にあるので、具体例を参考にするのも、良いと思います。
created
メソッド内でリソースサーバからデータ取得を行う。push
を行う。例えば this.$router.push({ name: "AboutA, query: { base: "JPY" } })
となる。これにより beforeRouteUpdate
メソッドが実行され、ここでリソースサーバからデータ取得を行う。これらの Vue Router の公式ページをしっかりと読み込んで理解できれば、本ページでやりたいことは実現できました。
住所の中にどの都道府県が含まれているのかを知りたい時。
u
を指定する。参考 => PHP: 正規表現パターンに使用可能な修飾子 – ManualC-b
(Ctrl-b)) + :new