カテゴリー
コンピューター

VS Code Remote Container で Veture 拡張機能を使おうとすると現れるエラー2つに対処しました

カテゴリー
コンピューター

Larvel 6 に入れた Vue.js 3 の環境で、 ESLint と Prettier を使う方法

本投稿は、 Laravel 6 で Vue.js 3 を使えるようにするまでの試行錯誤の記録 – oki2a24 の続きに当たります。

方針のまとめ

  • .eslintrc.js の extends について
    • Vue.js に関するルールは plugin:vue/vue3-recommended に任せる。
    • 他のルールは eslint:recommended に任せる。
    • Prettier との競合を避けるために prettier を使う。
  • ESLint と Prettiier は別々に実行する。

導入作業のまとめ

  • 依存パッケージの追加 → 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: {},
    };
    
  • .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",
    $
    
カテゴリー
コンピューター

Laravel 6 で Vue.js 3 を使えるようにするまでの試行錯誤の記録

まとめ

  • 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 をカスタマイズできるようにする方法

カスタマイズ導入方法まとめ

  • Vue.js 3 に Bootstrap 5 を組込む手順メモ – oki2a24 の続きであることが前提。
  • yarn add sass-loader@^10 sass で依存パッケージをインストールします。ここで @^10 とバージョンを指定しているのは、最新版をインストールするとビルド時にエラーが発生したため。公式ドキュメントにも注釈がある。→ Working with CSS | Vue CLI
  • src/scss/custom.scss を作成し、 @import "node_modules/bootstrap/scss/bootstrap"; を記述する。カスタマイズ内容は、この行よりも上に書くこと。
  • src/main.jsimport "@/scss/custom.scss"; を記述し custom.scss を読み込む。今まで読み込んできた素の Bootstrap である import "bootstrap/dist/css/bootstrap.min.css"; 行は不要となるので削除する。
カテゴリー
コンピューター

Vue.js 3 に Bootstrap 5 を組込む手順メモ

まとめ

  • yarn add bootstrap@next @popperjs/core
  • src/main.js に次を追加する。
    import "bootstrap";
    import "bootstrap/dist/css/bootstrap.min.css";
    
カテゴリー
コンピューター

Vue.js 、例えば検索を実行して同ページに結果を表示する時に、検索条件を URL クエリ引数に反映させたい。その方法

こんなケースを想定してみる

ページの検索フォームに入力して検索ボタンをクリックすると AJAX で検索用 API を実行する。この時に、検索パラメータを URL のクエリパラメータとして URL へ反映することはできるのか?

また、ブラウザでの戻る、進むをクリックした時も、検索結果をページに表示するのはもちろん、 URL クエリ引数や検索フォームに検索キーワードを反映させたい。

実装方法まとめ

以下、 Vue.js 2 (Options API) での勘所です。 Compotision API でもポイントは同じで、メソッドを適宜置き換えてください。どちらの実装例も本記事にあるので、具体例を参考にするのも、良いと思います。

  • ページ初回表示時は created メソッド内でリソースサーバからデータ取得を行う。
  • 検索ボタンをクリックしたら自分のページへ URL クエリ引数つきで Vue Router の push を行う。例えば this.$router.push({ name: "AboutA, query: { base: "JPY" } }) となる。これにより beforeRouteUpdate メソッドが実行され、ここでリソースサーバからデータ取得を行う。
  • リソースサーバからデータ取得を行う処理 (メソッド) では次を気をつけると良い。
    • 引数として、クエリパラメータを受け取る。
    • メインの処理 (リソースサーバからのデータ取得) 以外に、検索フォームへ対応する URL クエリ引数の値を設定する、などの処理を行う。

読むべき公式ページ

これらの Vue Router の公式ページをしっかりと読み込んで理解できれば、本ページでやりたいことは実現できました。

コード例