Vueでプロジェクトを初期化したときのメモ
vue create <project-name>でVueプロジェクトを作成したとき、毎回同じところでハマっているのでいい加減手順をメモしておく。
構成は Vue+Firebase、UIにVuetifyを使用する（Vue 4系）。
あと、ついでにFirebase FunctionsではローカルのESLintを有効にする（グローバルインスコしない）。
手順
どうもVueで初期化したプロジェクトフォルダ内でfirebase initすると、Functionsのpackage.jsonとVueのpackage.jsonが競合（nodeモジュールが思ったところにインストールされない）してしまうため、frontendとbackendディレクトリに分けて構成した。
package.jsonがnode_moduleを走査するときの動作が影響しているような気がするけど、いまいち分からん。
…と思って検索したらこうすればよかった件。でもやっぱりめんどそうだな…( ˘ω˘)
手順少し修正。FunctionsとHostingを同一フォルダにインストールしようとしてたのがいけない…。
Firebase でプロジェクトを作成
Firebase コンソールでプロジェクトを作成する。
FunctionsやStorage等初期化しておく（reagionは
asia-northeast1（東京））
あとでindex.htmlに注入するHtmlスニペットはとりあえず脇に置いておく。
ローカルにプロジェクトを作成
前準備として、
frontendとbackend/firebaseディレクトリを作成するfrontendディレクトリにて、vue create <project-name>でVueプロジェクトを作成する。このとき、TypeScriptを選択しておく（あとから導入する場合）tsconfig.jsonにてcompilerOptions.module: "commonjs"とするとりあえず
npm run buildでビルドできることを確認する（distディレクトリが生成）vue add vuetifyでVuetifyを導入する。App.vue等書き換えるか聞かれるが、問題なければYesで。tsconfig.jsonにて、compilerOptions.types: ["vuetify"]を追加する。忘れると型定義を参照できないためコンパイル時にエラー吐く。backend/firebaseに移動し、firebase initでFirebase プロジェクトを初期化するFirebase コンソールにて作成したプロジェクトを選択する
とりあえずFirestore
とHostingとFunctionsを選択する。Hostingはfrontendディレクトリで初期化する。FuncitonsをインストールするときにTSLintを導入するか聞かれるが、現在はESLintに移行しているようなのでNoを選択する
ひととおりインストールが終わったら、
frontendディレクトリに移動し、firebase init hostingでホスティングをインストールするHostingの設定時にデプロイするディレクトリを聞かれるので、
distとする。このとき既存のファイルを上書きするか聞かれるが、Noとするfirebase serveでVuetifyの初期ページが表示されることを確認backend/firebase/package.jsonにてdevDependenciesにeslintの依存関係を追加し、npm i./node_modules/.bin/eslint --initでESLintを導入frontend/public/index.htmlの<body></body>内にFirebaseを利用するためのHtmlスニペットを記載する
以上で終わり。 ローカルの構築にトラップがありすぎる。これ全部覚えてるフロントエンドエンジニアつよすぎでは…。
