7月8日の事前資料です

1. 【事前資料】７月８日開催
Vue.js 勉強会＠渋谷

2. 環境設定
• ①ブラウザ、Google ChromeのDL
• ② Node.jsのインストール
自分のPCのターミナルで $ node –vでバージョン確認できます
【Mac】 Homebrewを使う場合→brew –vでバージョン確認
$ brew update
$ brew install node.js
【Windows】http://nodejs.org/ja/から最新版をDL

3. 環境設定
• 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

4. プロジェクトのディレクトリの作成
• 任意のフォルダでvue init webpack hello-vueを実行
・作成したディレクトリで
$ cd hello-vue
$ npm run dev を実行

5. Welcome Your vue.js appと表示されれば成功!
http://localhost:8080でVueの表示を確認してください
*ここまでで何か質問あれば事前に連絡してください!

6. 環境設定が難しい方向け
• Code sandboxというサービスを利用
https://codesandbox.io/
• ブラウザ上で動くエディタ
• npm package対応している。
こちらでも十分に演習することは可能です。

7. 作成するアプリの例
• vueを活用したチャットアプリ
• メモ帳やTodoアプリなど