【第2回_もくもく会_超初心者】Vue.jsを学習する_公式サイト参照

本日も隔週水曜に実施される「もくもく会」でした！
今日はvue.js実装の経験がある人も一緒にもくもくしてくれました ヾ(´∀｀)ﾉｷｬｯｷｬ

公式サイトから学習する

公式サイトにいくと、「Vue Masteryで無料の動画コースを見る」という無料で学べるようなので、ここからやってみる。

(1)動画を進める

chromeの拡張機能"Vue.js devtools"をインストール

Vue.js devtoolsをインストール
そして....すぐに学習を続けられなくなった.....|ω·`)

(2)index.htmlが読み込まれず調査を開始する

index.htmlのファイルをいじっても何も変わらなかった。
どうやらHelloWorld.vueのtemplateから読み込まれていると知った。

とりあえずVSCodeの拡張機能"Vue VSCode Extension Pack"をインストール

Vue VSCode Extension Packをインストール

とりあえずsassを使えるようにする

npm install sass-loader node-sass --save-dev

調べるのが止まって、救いを求めることにしました。

経験者に助けを求める(涙)

index.htmlの中身が、App.vueの中身を読んでる事がわかったけど、どういう作りなのでしょう。と、経験者に聞くことにしました。

構成について気にし始める

先輩「CLIを使っているんですね？ 」と言われて、私は「はっ」としました。
使っていますけれど、どういうものか分かっていない.....

各々が部分テンプレートみたいにして作成してるんだよ。という事を言っていただいて、今後はそこらへんを深堀りしていきたいと思いますが、そもそも作りについてとか、実装しているものについてを振り返りたいと考えました。

Vue CLI では何をしているのでしょう？

vue.jsアプリ向けのCLIベースの開発ツール

ということでした。[参照したページ：Vue.jsの開発体験を次の次元へ CLIが苦手でも使える「Vue CLI」のすすめ]
この、コマンドを入力するだけでVue.jsの環境やプロジェクトのテンプレートファイルが一式で揃えられる「vue-cli」を"どうやら便利らしい"という理由で、私はインストールしています。

生成されたファイルの構成について考える

どう紐づいているのだろうか

最初にcreate vueした時に、連動していたのは"index.html","components/HelloWold.vue","App.vue"あたりを最初にいじると練習が出来そうだとは認識をしました。

以下の14行目にある<div id="app"></div>は削除すると画面にエラーは出なくても何も表示されなくなりました。

App.vueから読み込んでいる

importしているのは9行目の記述と教わりました。

動画でやりたかった事を実践してみる

13行目から17行目の実践をしたかったのです。

動画では、以下のコードでした。

vue.js

var app = new Vue({
  el: '#app',
  data: {
    product: 'Socks'
  }
})

実装するのが、chromeのconsoleだったから、この記述になっていたようです。
難しいですね。

とりあえず、Socksというもじに変更しました。
あとは画像が欲しかったので、「V」マークは残しておきました。

今日はここまでにしました。
引き続き、頑張ります.....