1112 nuxt
- 2. 自己紹介 ? 主催者プロフィール 三浦卓馬 ? これまで大学院での学校支援プロジェクトや学会発表を経験後、 ? 公立小の教員を半年間経験。その後G’sアカデミーにて新規Web サービ スの企画立案から開発までの基礎を学びSNSを卒業制作として作成。 ? またサービスの開発だけでなく、マーケティングやデータベース、サー バーの基礎を学ぶ。G’sアカデミー卒業後は、常駐案件のエンジニアをし ながら、ブロックチェーン開発などやっております。 ? →4月よりIot開発企業に勤務 ? →Diveinto code機械学習エンジニアコースのチュータ（予定）
- 4. 環境設定 ? ①ブラウザ、 ChromeのDL ?G②ooNgloede.jsのインストール 自分のPCのターミナルで $ node –vでバージョン確認できま す 【Mac】 Homebrewを使う場合→brew–vでバージョン確認 $ brewupdate $brew install node.js 【Windows】http://nodejs.org/ja/から最新版をDL
- 6. Nuxt.js（ナクストと は ? Nuxt.jsとはユニバーサルなVue.jsアプリケーションを構築するため の フレームワーク ? vue-cliを利用 ? $ npm install -gvue-cli # 既にvue-cliを導入されているかたについては 不要です ? $ vue init nuxt-community/starter-template nuxt_sample
- 7. プロジェクトのセットアップと実 行 ? $ cdnuxt_sample ? $ yarn ? $ yarndev
- 8. 以下、表示できたら成功
- 9. さらに、やりたい人 ? 以下?公式https://nuxtjs.org/ ? ルーティングの追加と非同期データの取得 ? Nuxt.js 上での開発におけるbabelの対応文法のソース（設定プリ セット）https://github.com/vuejs/babel-preset-vue-app ? 参照URLhttps://html5experts.jp/potato4d/24346/
- 10. 環境設定続 き? npmコマンドのインストール ? $ npm –vでバージョンを確認できるので最新のものにす る ? npmパッケージのインストール $npm installvue vue.jsのインストール $npm installvue vue-cliのインストール npm install --globalvue-cli ＊webpackやbabelを使いたい場合 $npm install webpackwebpack-dev-server–save-dev
- 11. プロジェクトのディレクトリの作 成 ? 任意のフォルダでvueinit webpackhello-vueを実 行 ?作成したディレクトリで $ cdhello-vue $ npm run devを実行
- 13. 環境設定が難しい方向け ? Codesandboxというサービスを利用 https://codesandbox.io/ ? ブラウザ上で動くエディタ ? npm package対応している。 こちらでも十分に演習することは可能です。
- 16. タイムテーブル ? 14:30 - 開場?受付開始 ? 14:30 – 14:35 オープニング ? 14:35 – 14:50 自己紹介 全員 ? 14:50 - 16:30 webアプリを作成してみる ? 16:30 - 17:00 成果発表(フリートーク） ? 17:00 - 17:30 クロージング (アンケート) ? ※途中退場可能
- 17. 会場の注意事項 ? 備品など間違って持ち帰らないように ? 飲酒は禁止です。 ? 17時15分には撤収予定です。 ? 案件やこんなサービス使ってるなど、 参加者の方でLTしたい方は事前に申し出てください！
- 19. 作成するアプリの 例? vueを活用したチャットアプリ ? メモ帳やTodoアプリなど ? 参考記事URL&Githubリポジトリ Nuxt.jsとFirebaseによる簡易チャットアプリ https://github.com/hayasakaharuka/nuxt-firebase-chat-app →こちらをクローンしていただけるとスムーズです
- 22. 尝别迟’厂スタート！！