VuejsでTodoを作った
Vue.jsを使って、Todoアプリ的なものを作りました。
unitia こちらのページにHow to TodoとReadmeを用意したり、Todoを実装したりして遊んでます。
複数ページあるように見えますが、実態はVueを使ったSPA(シングルページアプリケーション)になります。
使用したライブラリ
- Vue(本体:Router込み)
- Vue-ls(ローカルストレージライブラリ
- Bootstrap-vue(Bootstrap4のVueライブラリ:使用中止)
- buefy(BulmaのVueライブラリ)
- Bulma(一部buefyに未実装コンポーネントを使用するため利用)
- vue-analytics(SPAでもアクセス解析したいな、と思い
「Vue-SPAでもGoogle Analyticsしたい!」を参考に実装させてもらいました。
How to Todoに実際のスクショを載せたりしてますが、
ブラウザ固有のローカルストレージを使った方法でTodoを保持するので、再読み込みしたりしてもデータが飛ぶことはありません。ブラウザが壊れない限り()
今後の目標はトップページに記載していますが、GoogleDriveAPIを使い、Googleアカウントに紐付けた、スマホとPC間でTodoを相互に共有出来たらなと、考えています。
(GoogleDriveAPIの取得方法調べまくってる。課金とかの文字が怖い)