Repro Tech Hands-on : Nuxt.js

Dcbb7171913db2969bd56554ab751b9a?s=47 Matsuo Obu
December 16, 2018

Repro Tech Hands-on : Nuxt.js

Repro Tech Hands-on : Nuxt.js (2018-12-16) での解説資料。ハンズオンに使用したリポジトリはこちら ( https://github.com/mqtsuo02/nuxt-handson )

Dcbb7171913db2969bd56554ab751b9a?s=128

Matsuo Obu

December 16, 2018
Tweet

Transcript

  1. None
  2. 自己紹介 - 大武松生( mqtsuo02 ) - フリーランスのWebエンジニア - 最近の仕事:React, React

    Native, Nuxt.jsなど - 技術書典5:「もってけ!PWA」頒布
  3. スケジュール 13:00 イベント開始       前置き & 解説(30分くらい)       ハンズオン 16:00 懇親会 17:00 解散   ※ 一時間毎に休憩時間をとります。

  4. アンケート (1) 普段どの分野で仕事をされていますか? - マネジメント - 要件定義(SE) - デザイン -

    フロントエンド(Web) - フロントエンド(アプリ) - バックエンド - インフラ - その他
  5. アンケート (2) どれに該当しますか? - Nuxt.jsで一通りWebアプリを実装した - Nuxt.jsをちょっと触った - Nuxt.jsは触っていないが、Vue.jsはある程度触った -

    Nuxt.jsもVue.jsも触っていないが、他のモダンフレームワークは触った - 色々初めて
  6. ハンズオンで使用するリポジトリ   https://github.com/mqtsuo02/nuxt-handson   Twitter「 #reprotech 」にURL貼りました。   Connpassのイベントページにも貼りました。

  7. 本日のゴール Nuxt.jsでシンプルなWebアプリケーションの実装 - ゼロからNuxt.jsをインストールして「Hello, Nuxt !!」 - ルーティングの実装 - axiosを使ってWebAPIの繋ぎこみ

    - Vuetify.jsを使って良い感じの見た目にする
  8. 動作確認をお願いします       参照:nuxt-handson/00-setup

  9. 解説コンテンツ

  10. 解説コンテンツ - Vue.jsはUIライブラリ、Nuxt.jsはフレームワーク - Nuxt.jsでアプリを作る際に従うルール - .vueファイルについて - <template>について -

    <script>について - Nuxt.jsのファイル構成について
  11. Vue.jsはUIライブラリ、Nuxt.jsはフレームワーク  Vue.js   + Vue Router, Vuex, Vue Server Renderer, vue-meta, …

      + Webpack, Vue Loader, ...   + 独自のカスタマイズ   = Nuxt.js - SPA、サーバーサイドレンダリング、静的サイト生成がすぐできる - ビルドプロセスに悩まなくて済む
  12. Nuxt.jsでアプリを作る際に従うルール 実装時に色々なドキュメントを参照する必要がある - Vue.jsのルール - Nuxt.jsのルール - Vue Routerのルール -

    Vuexのルール
  13. .vueファイルについて 単一ファイルコンポーネント (Single File Components) - Webpack と Vue Loaderによって解析される

    - <template> と <script> と <style> - <script>でデータを処理して、<template>に渡して表示する
  14. <template>について - HTMLのタグをそのまま使用することができる - <script>のdataを表示するときは、{{ hoge }}  ( マスタッシュ記法 )

    - ディレクティブで様々なDOM操作を行うことができる ( v-for, v-if, v-bind, v-on, v-model ) - タグの属性に対してdataを使う場合は v-bind という機能を使う - ライブラリのタグを埋め込んだりする。<router-link>とか<nuxt /> - 自分で作ったコンポーネントを埋め込んだりする。<hoge-list />
  15. <script>について - JavaScriptで処理を書く - export default { … } の中にdataや関数を書いていく

    - Vue.jsのライフライクルイベントとNuxt.jsのライフライクルイベントに応じた処理をか ける。( beforeMount とか asyncData とか ) - 外部モジュールを使用するときはimportして使う - コンポーネントを使うときは、importしてcomponentsで指定すると<template>で使 用可能となる
  16. Nuxt.jsプロジェクトの構造について 今回のハンズオンで使用するもの - pagesディレクトリ ... ルーティング単位でvueファイルを作成する - layoutsディレクトリ ... 全体に適用するレイアウトを入れる - componentsディレクトリ ... 部品化したコンポーネントを入れる - nuxt.config.js ... アプリ全体の設定を行う

  17. ハンズオン

  18. ハンズオンのコンテンツ - ゼロからNuxt.jsをインストールして「Hello, Nuxt !!」 - ルーティングの実装 - axiosを使ってWebAPIの繋ぎこみ -

    Vuetify.jsを使って良い感じの見た目にする
  19. ハンズオンの進め方 - GitHubのREADMEにそって進めていきます。 - 随所で作業時間をとります。 - 作業時間中にメンターが歩き回ったりするので、先に進めないときは質問 してください。 - ハンズオンの内容以外の質問は、休憩時間や懇親会のときにお願いしま

    す。