Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

1112 nuxt

67 views

Published on

IT

Published in: Business
  • Be the first to comment

  • Be the first to like this

1112 nuxt

  1. 1. 令和2年・ 1月12日開催 Vue.js NuXT 勉強会@WeB Bench渋谷
  2. 2. 自己紹介 • 主催者プロフィール 三浦卓馬 • これまで大学院での学校支援プロジェクトや学会発表を経験後、 • 公立小の教員を半年間経験。その後G’sアカデミーにて新規Web サービ スの企画立案から開発までの基礎を学びSNSを卒業制作として作成。 • またサービスの開発だけでなく、マーケティングやデータベース、サー バーの基礎を学ぶ。G’sアカデミー卒業後は、常駐案件のエンジニアをし ながら、ブロックチェーン開発などやっております。 • →4月よりIot開発企業に勤務 • →Diveinto code機械学習エンジニアコースのチュータ(予定)
  3. 3. Vue.JSに多少触れた HTML,CSS,JS ググりながら進められるようになる 分かる方はLT側に回ったり、もくもく進めてください
  4. 4. 環境設定 • ①ブラウザ、 ChromeのDL •G②ooNgloede.jsのインストール 自分のPCのターミナルで $ node –vでバージョン確認できま す 【Mac】 Homebrewを使う場合→brew–vでバージョン確認 $ brewupdate $brew install node.js 【Windows】http://nodejs.org/ja/から最新版をDL
  5. 5. Nuxt.jsをやる方向け
  6. 6. Nuxt.js(ナクストと は • Nuxt.jsとはユニバーサルなVue.jsアプリケーションを構築するため の フレームワーク • vue-cliを利用 • $ npm install -gvue-cli # 既にvue-cliを導入されているかたについては 不要です • $ vue init nuxt-community/starter-template nuxt_sample
  7. 7. プロジェクトのセットアップと実 行 • $ cdnuxt_sample • $ yarn • $ yarndev
  8. 8. 以下、表示できたら成功
  9. 9. さらに、やりたい人 • 以下・公式https://nuxtjs.org/ • ルーティングの追加と非同期データの取得 • Nuxt.js 上での開発におけるbabelの対応文法のソース(設定プリ セット)https://github.com/vuejs/babel-preset-vue-app • 参照URLhttps://html5experts.jp/potato4d/24346/
  10. 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. 11. プロジェクトのディレクトリの作 成 • 任意のフォルダでvueinit webpackhello-vueを実 行 ・作成したディレクトリで $ cdhello-vue $ npm run devを実行
  12. 12. WelcomeYourvue.jsappと表示されれば成功! http://localhost:8080でVueの表示を確認してください *ここまでで何か質問あれば事前に連絡してください!
  13. 13. 環境設定が難しい方向け • Codesandboxというサービスを利用 https://codesandbox.io/ • ブラウザ上で動くエディタ • npm package対応している。 こちらでも十分に演習することは可能です。
  14. 14. 本日、何をやっていいかわからな人にオススメ ・Vue.js製フレームワークNuxt.jsではじめる Universalアプリケーション開発 https://html5experts.jp/potato4d/24346/ ・ VueNativeでTodoアプリを作ろうその1 https://qiita.com/nitaking/items/5c6fb6990d3bdb5 769cc
  15. 15. Vue.js 日本コミュニティ ・ Slackhttps://vuejs-jp- slackin.herokuapp.com/
  16. 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. 会場の注意事項 • 備品など間違って持ち帰らないように • 飲酒は禁止です。 • 17時15分には撤収予定です。 • 案件やこんなサービス使ってるなど、 参加者の方でLTしたい方は事前に申し出てください!
  18. 18. グループを3つに分けます vue初心者の方 環境構築やvueに触り始めの方 自分で何かしらのの開発経験がある方 もくもくと進めたい方
  19. 19. 作成するアプリの 例• vueを活用したチャットアプリ • メモ帳やTodoアプリなど • 参考記事URL&Githubリポジトリ Nuxt.jsとFirebaseによる簡易チャットアプリ https://github.com/hayasakaharuka/nuxt-firebase-chat-app →こちらをクローンしていただけるとスムーズです
  20. 20. 参考書籍&記事URL&②(当日、一部持っ ていきます 初めてのシングルページアプリケーションVue.jsとFirebaseで作る ミニWebサービス https://booth.pm/ja/items/829853 React,Angular,Vue.js,ReactNativeを使って学ぶ はじめてのフロント エンド開発 Kindle版 https://gihyo.jp/book/2018/978-4-7741-9706-7 Nuxt.jsビギナーズガイド―Vue.jsベースのフレームワークによるシ ングルページアプリケーション開発 http://nakajmg.hatenablog.com/entry/2018/11/10/131233
  21. 21. 本日の目標 何かしらのWebサービスを作成する ・例 会員制のTodoサイト ・チャットサイト ・ブログサイト 参考 皆様に作業する箱を提供しますので各自、もくもく進めましょう! *質問はバンバンOKです!
  22. 22. Let’Sスタート!!

×