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

Laravel 6 、 Vue.js 3 の SPA で `npm run production` が失敗する問題を修正する

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

Vue.js 3 でラップしてコンポーネント化した Dropzone.js の SFC (シングルファイルコンポーネント) を作り、利用する例を作った

やりたいことや前提

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

Laravel 6 。ファイルを扱うシンプルな CRUD API の例を作った (今後 Dropzon.js を試すために)

簡単な仕様

  • GET api/files ファイル情報の配列を取得する。
  • GET api/files/{file} 指定したファイル情報を取得する。
  • POST api/files ファイルを登録する。
  • PATCH api/files/{file} 指定したファイルを更新する。
  • DELETE api/files/{file} 指定したファイルを削除する。

ファイル登録時などのレスポンスは、最初、 URL だけでいいや、 DB で管理したく無いし、と思っていました。 しかし、 How to show files already stored on server – FAQ · Wiki · Matias Meno / Dropzone · GitLab を読むと name, size, url が Dropzone.js では必要なようです。 なので、面倒ではありますが DB でこれらを管理しようと思います。。。 こうなると、例えば POST 時のレスポンスは次のようになるかと思います。

{
  "name": "file.jpg",
  "size": 12345,
  "url": "http://localhost/storage/files/rXVtdVkqRvR7G0PYZUtupJNPmM9mPhdqrvkHI4Ly.jpg"
}
カテゴリー
コンピューター

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