B-Teck!

お仕事からゲームまで幅広く

【JavaScript/Vue.js】Vue.jsとVuetifyを使ってTodoリストを作ってみた

f:id:beatdjam:20190629195739p:plain

ちょっと会社でVueを触る機会があったので、勉強がてらTodoリストを作ってみました。
リポジトリと動作サンプルは下記
GitHub - beatdjam/training_vue-cli-todo
サンプルページ

やったこと

vue-cliインストール

$ npm install -g @vue/cli

プロジェクト作成

$ vue create my-project

Vuetify導入

$ vue add vuetify

ファイル整理

Todoを作り始めるにあたっていらないファイルを削除
[remove]Unnecessary files removed · beatdjam/training_vue-cli-todo@3fb851f · GitHub

完成イメージを考える

適当にUIイメージをメモに書き出すなど

必要なComponentをVuetifyのサイトで検索して配置

とりあえず今回はこの辺のドキュメントをサラッと眺めました

  • v-toolbar
  • v-form
  • v-text-field
  • v-btn
  • v-date-picker
  • v-list
  • v-checkbox
  • v-icon

Quick Start — Vuetify.js

追加・削除の処理などを実装

コンポーネントに頼ったので、ロジック的には追加・削除しか書かずに実装できました。

Github Pagesに公開

下記のページを参考に設定
https://www.shookuro.com/entry/2019/02/02/174655

感想

Vue.jsの機能とVuetifyのコンポーネント群を利用することで、
曖昧な理解でも簡単にそれなりのアプリケーションを構築することができてしまいました。
小さめのプロダクトをスモールスタートするときに使うには良いと思います。
ただ、jQuery等と同様に、裏側の処理等を知らないまま負債を積み上げてしまうような気がしました。
最近 Vue.js入門 基礎から実践アプリケーション開発まで を購入したので、
読み進めながらもっと勉強していきたいと思います。

Vue.js入門 基礎から実践アプリケーション開発まで

Vue.js入門 基礎から実践アプリケーション開発まで

  • 作者: 川口和也,喜多啓介,野田陽平,手島拓也,片山真也
  • 出版社/メーカー: 技術評論社
  • 発売日: 2018/09/22
  • メディア: 単行本(ソフトカバー)
  • この商品を含むブログを見る