会社のグループウェアをVue.jsで作成してみる(1日目)

きっかけ

今更ながら、JavaScriptフレームワークを使う仕事が
今後増えそうなので、勉強している。

 勉強の方法

勉強の方法としては、やっぱり実際に作ってみたほうがいいし、
さらに会社でみんなで使ってもらえたら楽しいよなーと思ったので、
会社のグループウェアの作成を目的に作ってみることにした。

しかし、子持ちの家庭のため、
1日30分が開発に当てられる時間かなあといった感じ。

プロジェクトの作成

以下のコマンドでプロジェクト作成

vue init webpack  XXXXX

その後、デザインはVuetifyを試してみたかったので、
以下のコマンドで追加。

vue add vuetify

コマンド実行後、色々聞かれるがすべてデフォルトを選択

レイアウトの決定

プロジェクトの作成は終わったので、画面のレイアウトを考える。
拡張性を考えて、画面上部にツールバーがあり、
その下がメインコンテンツの構成にしたいと考えた。

こうすることで、追加機能が欲しいということになっても、
ツールバーにメニューを増やし、
メインコンテンツは機能ごとでレイアウトを変えることができる。

Googleでよりサンプルを探すと公式ページがヒットした。 vuetifyjs.com

この中から、Youtubeがよさそうだったので、これを選択。
さっそく、VSCodeを使用して組み込んだ。

テキストアイコンのインストールが必要だったがインストールして、今この状態。 f:id:rarao1048:20190505224517p:plain

テキストフォントが機械的すぎて変えたい。どうやって変えるんやろ?
続きは明日。