30
43

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

Vue.js2+Vuefire+firebaseその他もろもろで欲しいもの管理アプリ

Last updated at Posted at 2018-06-15

##概要
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

30
43
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
30
43

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?