Open17
vue-viviomega開発のscraps
びびおめが記事に全て記載していったが開発が進むに連れてネタが薄くなるのでスクラップでメモ程度にまとめて技術的に記事にしたいところだけ記事にする路線変更
びびおめが<script setup>
const emit = defineEmits({
// emitの第一引数と同じ命名にする必要あり
submit: {
name: "",
birthday: "",
gender: null,
pr: "",
},
});
emit("submit", state);
</script>
emit()で"submit"と記述した際はdefineEmitsで宣言した"submit"する必要がある
下記ワーニングが表示される
びびおめがコンポーネントの全容は下記commit参照
| SHA | commit message |
|---|---|
| 6e004b2 | プロフィール項目コンポーネント追加 |
びびおめが初期設定の動作テスト
# vueのプロジェクト
yarn dev
# エミュレータ
firebase emulators:start
プロフィール登録機能の実施
FirebaseのFirestoreを使ってデータを管理
プロフィール項目コンポーネントから受け取ったデータをFirestoreに登録するシンプルな仕組みになってます
| SHA | commit message |
|---|---|
| b1a87d9 | プロフィール登録の追加 |
びびおめが登録されているユーザの情報を表示する画面
| SHA | commit message |
|---|---|
| 13471d4 | プロフィール画面レイアウト追加 |
びびおめが入力項目の日付型はyyyy-mm-ddの方でないと認識しない
びびおめが画像をストレージにアップロードする処理の追加
インポートの際、refがvueのインポートとstorageの両方にあるためasを使う
びびおめが画像をストレージにアップロードする処理の追加
| SHA | commit message |
|---|---|
| 6307506 | 画像を追加 |
びびおめがアイコンの画像を追加する処理を分離する
びびおめが
すぐには実装しないが今後、アイコン画像を自分でトリミングできるよう実装する
びびおめが画像の変更時のUI/UXが不親切なため変更を加えていく