フロントエンドのコーディング進めました

今日はユーザー新規登録ページのコーディング など 進めました。
フロントエンドはまだまだわからないことが多いので、どんどんコード書いて壁にぶつかって勉強してクリアするのを繰り返していきたいです。

新規登録ページはバリデーションをかけたいので、Vue.jsでバリデーションかけるライブラリとかあるか調べたところVeeValidateというものが良く使われているようでした。

qiita.com

VeeValidateは以下のコマンドでインストールできました。

npm i vee-validate --save

まだ細かい設定はわかってないですが見よう見まねでコード書きながら試していきます。

あと、VueからGoにリクエストを送るAPIエンドポイントを共通化するために、環境変数で定義したところアプリで参照できずけっこうハマってしまいました。

調べたところ.envファイルで「VUE_APP_」の接頭語をつけないといけないらしく、自分は「API_ENDPOINT」と定義してたので参照できていないようでした。 (Vue CLIのバージョンも関係あるっぽい)

qiita.com

上記記事を参考に「VUE_APP_API_ENDPOINT」で環境変数を定義したらうまくいきました。解決できたので良かったですが、これで30分ほど費やしたのでちょっと悔しいですね。ググる技術をもっと上げていきたいと思います。
あと環境変数はホットリロードが効かないみたいで、環境変数を変えたあとは一度アプリ止めて改めてnpm run serveする必要がありました。
これでも少し苦戦したので忘れないようにメモ。

明日もいろいろ試していきます。