DApps作成②

コントラクトというかバックエンド側は一段落したので続いてフロントエンド側を作っていきます。

私はフロントエンド側の経験がほぼないのでここから先はおそらくものすごいペースダウンします＾＾；

せっかくなのでフレームワークを利用してみようかなということでvue.jsを導入して進めていきます！
なぜvueを選んだのかというと…

何か名前よく聞くから覚えておいて損はないかなって適当な理由です；；；

何はともあれvueの導入を進めていきます。

ますはインストール

$ npm install vue
$ npm install --global vue-cli

インストールが完了したらプロジェクトのフォルダにvueのテンプレートを適用します。

プロジェクトのルートで実行
$ vue init webpack-simple

• simpleオプションを付けることでその名の通りシンプルな状態で用意してくれるようです。

実行すると何か色々聞かれますがほぼエンターでOK。
他のサイトさんを参考にさせていただいてましたが、vue initはフォルダ内に何かあっても実行できますが、truffle initは空の状態でないと実行できないとのことです。
なのでtruffle init -> vue initの順番で実行しないと失敗します。

initが完了したら

$ npm run dev

と実行するとローカルのブラウザ上で動いてるのが確認できます。

initを実行するとsrcフォルダの中にApp.vueというものが生成されているのでこれを編集していきます。
これをvueとjavascriptを使用してガリガリ編集していくと先ほどのページが編集されていきます。(たぶん)

ただ今vueの参考書を読みつつApp.vueを編集し始めました。