きっかけ
UI周りの実装が楽にならないか探して、vue.jsを知ったので試してみる。
react.jsも試したことはあるんだけど、覚えることが多くて辞めた。
環境
バージョン: 1.33.1 (system setup) コミット: 51b0b28134d51361cf996d2f0a1c698247aeabd8 日付: 2019-04-11T08:27:14.102Z Electron: 3.1.6 Chrome: 66.0.3359.181 Node.js: 10.2.0 V8: 6.6.346.32 OS: Windows_NT x64 10.0.17763
詳細
nodeはインストールした前提で始める。
Vue cliのインストール
とりあえず、公式にあるとおりにインストール。
npm install -g @vue/cli
グローバルに入れるのは、プロジェクト作成のツールであるため。
vue create my-project とすると、my-projectの中にnpmのプロジェクトができるので、自分で作ってローカルにインストールすると、二重にできてしまうから。
プロジェクト用意
先に書いてしまったが、下記のコマンドで用意
vue create my-project
結構、長い。。。
気長に待つ、
とりあえず実行
インストールが終わると、npm run serve で起動できるらしいので、作られたmy-project配下に移動して、コマンドを叩く。
$ cd my-project $ npm run serve
serveって、serverのことかな？
http://localhost:8080/で起動したよ的なメッセージが出てきたので、ブラウザでアクセスしてみる。
そうすると、vueのサンプルページが見えるはず。
バインディング
App.vue と HelloWorld.vueの連携はわかったんだけど、index.htmlとApp.vueの連携がよく分からなかったので調べた。
紐付をしているのは、main.jsの下記の実装
new Vue({
render: h => h(App),
}).$mount('#app')
appにApp.vueを設定している。
下記の記述と同価
new Vue({
el: "#app",
render: h => h(App),
})
render関数は、業が深そうなので、こうすると描画されるんだ程度で辞めとく。
感想
vueファイルとあるが、内部は、css/html/jsだから、素直に読めるのがいいと思った。
イベントハンドリングや文字列の埋め込みは、別の機会に。
