Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (20)
Ähnlich wie 1112 nuxt
Ähnlich wie 1112 nuxt (20)
Mehr von 卓馬 三浦卓馬
Kürzlich hochgeladen
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. Let’Sスタート！！