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

Laravel 6 、 Vue.js 3 のプロジェクトに Vue Router を追加するメモ

まとめ

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

Laravel 6 、 Vue.js 3 が入っただけの状態から、最初の SPA ページを用意するためにやること

仕組み

  • laravel/routes/web.php がリクエストを受け付ける。このとき、どんな URL でも 1 つの Blade ビューを返すように設定する。
  • 返された Blade ビューに記述しておいた <div id="app"></div><script src="{{ mix('/js/app.js') }}"></script> などにより、 Vue.js を使えるようになる。
カテゴリー
コンピューター

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",
    $
    
カテゴリー
コンピューター

Laravel6。 SQLite での URL を使用したデータベース設定の癖を整理

まとめ

  • URLを使用したデータベース設定 データベース:利用開始 6.0 Laravel
  • DB_CONNECTION は指定した方が無難。指定しなくとも SQLite へ接続できたが、 DB_CONNECTION はデフォルト (特に設定ファイルを編集していない場合は mysql となる) となる。
  • SQLite の場合のデータベース URL のスキーマ: driver:///database?options 。具体的な例: sqlite:////absolute/path/to/database.sqlite?foreign_key_constraints=true