【事前資料】7月8日開催
Vue.js 勉強会@渋谷
環境設定
• ①ブラウザ、Google ChromeのDL
• ② Node.jsのインストール
自分のPCのターミナルで $ node –vでバージョン確認できます
【Mac】 Homebrewを使う場合→brew –vでバージョン確認
$ brew update
$ brew install node.js
【Windows】http://nodejs.org/ja/から最新版をDL
環境設定
• npmコマンドのインストール
• $ npm –vでバージョンを確認できるので最新のものにする
• npm パッケージのインストール
$npm install vue
vue.jsのインストール
$npm install vue
vue-cliのインストール
npm install --global vue-cli
*webpackやbabelを使いたい場合
$npm install webpack webpack-dev-server –save-dev
プロジェクトのディレクトリの作成
• 任意のフォルダでvue init webpack hello-vueを実行
・作成したディレクトリで
$ cd hello-vue
$ npm run dev を実行
Welcome Your vue.js appと表示されれば成功!
http://localhost:8080でVueの表示を確認してください
*ここまでで何か質問あれば事前に連絡してください!
環境設定が難しい方向け
• Code sandboxというサービスを利用
https://codesandbox.io/
• ブラウザ上で動くエディタ
• npm package対応している。
こちらでも十分に演習することは可能です。
作成するアプリの例
• vueを活用したチャットアプリ
• メモ帳やTodoアプリなど

Vue