概要
Vue.jsの勉強がてら、あったらいいなと思っていた欲しいもの管理アプリを作成しました。
折角なのでアウトプット！ということでQiita初投稿です。
使ったもの
1.Vue.js2(vue-cli)
2.Vuefire
3.firebase
4.vue-router
5.その他css一部コピペ
最初はライブラリ無しでやろうと思ったのですがfirebaseとVueのバインディングやデータプッシュ時のkeyの管理がとても面倒なのでVuefireというライブラリを使用しました。また画面遷移もVueオフィシャルでVue-routerという素晴らしいものがあったので利用しました。
機能
ログイン、新規登録（FirebaseのAuth認証）
新規欲しいものの登録、編集、削除（カードにマウスオーバーでボタンが出ます）
ログアウト
RTBDにデータを常に同期
成果物
firebaseのホスティングでそのまま公開しました。
成果物
accountの新規作成もできますがデモ用のアカウントもよういしてあるのでご自由にお使いください。
email:demo@demo.com
pass:demodemo
最初簡単なTodoのつもりで作ってたのでプロジェクト名がTodoなのは気にしないでください。
コード→設計図共有サイト
感想と詰まったところ
Vueすごい
.vueで一つにまとまったコンポーネントになるのがとても便利だった
→親子間コンポーネント同士でのイベントの発火やデータの受け渡しは若干面倒だった印象（Anguarとかよりはマシ。。？）
Vue1系とVue2系で仕様が全然違うので調べながら描くのにとても時間がかかった＋Vuefireのドキュメントもちょくちょく変わってて使えない所とかがあったのが一番今回で苦労した点でした。
でもVueすごい
展望
割と実用性のあるものが作れたのでしっかりとアラートなど実装してもう少し機能増やせたらなと思います。あとほしい！って思ったときにPCの前にいるよりスマホ持ってることのが多そうなのでレスポンシブ対応もしたいです。
さいごに
初投稿のため至らない所も多かったと思いますが読んでいただきありがとうございます。
バグ、指摘、機能追加の要求などなんでもお気軽にお申し付けください。
Author：unotovive