====== 181125 WindowsでVue.jsを始める ====== Ionic4がいつまでたってもbeta版のままなので、Vue.jsを触ってみたくなり、以下の本を衝動買い。 [[https://amzn.to/2SeJXxX|改訂新版　Vue.jsとFirebaseで作るミニWebサービス (技術書典シリーズ（NextPublishing）) Kindle版]] Vue.jsは初心者にとっつきやすいらしいという話を聞いたことがある。上記の本を写経してみる。 ===== 開発環境 ===== Windows 8.1 Pro Node v8.12.0 VisualStudioCode あらかじめ、Node.jsをインストールしているものとします。 Node.jsは、以下のサイトから、Windows(x64)用のLTS版をダウンロードしてインストールします。 https://nodejs.org/ja/ {{:z_blog:2018:pasted:20181125-151624.png}} ===== WindowsにVue.jsをインストール ===== -C:/ ドライブに、vue/ フォルダを作成する。 -C:/vue/ フォルダを、VisualStudioCodeで開く -Ctrl+@でコマンドプロンプトを開く -以下を入力 npm install -g vue-cli vue -h {{:z_blog:2018:pasted:20181125-153002.png}} ===== Webpack-simpleテンプレートのダウンロードとセットアップ ===== C:/vue/ フォルダをVisualStudioCodeで開き、Ctrl+@でコマンドプロンプトを開き、以下を入力。 vue init webpack-simple mymarkdown2 // いろいろ聞かれるが、基本的にEnterを押して、最後のUse Sass? だけ、Yes + Enter {{:z_blog:2018:pasted:20181125-175138.png}} cd mymarkdown2 npm install npm run dev {{:z_blog:2018:pasted:20181125-181025.png}} {{:z_blog:2018:pasted:20181125-195822.png}} 自動的にブラウザが開く。 {{:z_blog:2018:pasted:20181125-181155.png}} ファイル構造は、Ionic(Angular)と比べてすごく単純である。これはよいかも！？ {{:z_blog:2018:pasted:20181125-200003.png}} IonicやAngularと異なり、Vue.jsでは、テンプレートがいろいろあるらしい。。。 今回は、Webpack-simpleテンプレートを使用した。 https://github.com/vuejs-templates/webpack-simple {{:z_blog:2018:pasted:20181125-154013.png}} 参考：[[https://qiita.com/h_plum/items/86b8a6a86ac0fea8a4d1|Vue-cli(webpack)解剖 ーディレクトリ構成ー]] ===== App.vueを変更 ===== まずは、Hello World!から。 App.vue　というファイルがあるのだが、以下のような構造になっている。