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.

20170530 lt

161 views

Published on

LT会資料

Published in: Engineering
  • Be the first to comment

  • Be the first to like this

20170530 lt

  1. 1. Nuxt.jsっていう Vue.jsでSSRする やつ触ってみた
  2. 2. Nuxt.js 読み方はナクスト?? サーバーサイドレンダリングってや つができるって書いてあった。 (けどまだ試してないのでよくわかんない)
  3. 3. サーバーレスで 静的に生成された ウェブアプリケーション が手に入るらしい https://ja.nuxtjs.org/guide#静的ファイルの生成
  4. 4. nuxt generate はアプリケーションをビルドす る際に、各ルートごとの HTML を生成しま す。 このやり方により、静的ファイルをホスティン グするサービスであっても、生成されたウェブ アプリケーションをホストできます。 最も良い例はこのウェブサイト自体です。こ のサイトは生成され GitHub Pages でホ ストされています: https://ja.nuxtjs.org/guide#静的ファイルの生成
  5. 5. Nuxt.js Github pages で検索すると いっぱい出て来た
  6. 6. とりあえず やってみた https://pocchi.github.io/
  7. 7. はまった ポイント 1. サーバサイド・クライアントサイド の混乱 1. Github pagesの名前間違い
  8. 8. コンポーネント を作成し、 読み込ませる <template> <section class="container"> <CanvasArea /> </section> </template> <script> import CanvasArea from '~components/CanvasArea.vue' export default { components: { CanvasArea } } </script> pages/index.vue
  9. 9. 作成した コンポーネント がこれ <template> <div class="CanvasArea"> <canvas id="tutorial"></canvas> </div> </template> <script> export default { name: 'CanvasArea', created: function () { this.$store.dispatch('createFunction') } } </script> components/CanvasArea.vue
  10. 10. 作成した コンポーネント がこれ <template> <div class="CanvasArea"> <canvas id="tutorial"></canvas> </div> </template> <script> export default { name: 'CanvasArea', created: function () { this.$store.dispatch('createFunction') } } </script> components/CanvasArea.vue ここの指定ではまる
  11. 11. サーバーサイド・ クライアントサイド の混乱 https://vuejs.org/v2/guide/instance.html#Lifecycle-Diagram beforeMount created beforeCreate mounted beforeUpdate updatedbeforeDestroy destroyed よく見る公式ライフサイクルの図
  12. 12. サーバーサイド・ クライアントサイド の混乱 https://vuejs.org/v2/guide/instance.html#Lifecycle-Diagram beforeMount created beforeCreate mounted beforeUpdate updatedbeforeDestroy destroyed https://ja.nuxtjs.org/guide/plugins クライアントサイドとサーバサイドの 両方で呼び出される クライアントサイドのみで呼び出される テンプレートの コンパイルがここ
  13. 13. <template> <div class="CanvasArea"> <canvas id="tutorial"></canvas> </div> </template> <script> export default { name: 'CanvasArea', mounted: function () { this.$store.dispatch('createFunction') } } </script> components/CanvasArea.vue beforeMount 以降に変更
  14. 14. 動いた!! 丸できた!! Canvasにランダムで 丸を描画するだけのプログラム
  15. 15. Github pages で見れるよう にしたい 1. Nuxt generateコマンドでdist以下に静的htmlを 生成 1. Masterブランチを一旦削除し、dist以下をpush (色々やり方はある)
  16. 16. push完了 source branch master branch
  17. 17. おや・・?
  18. 18. ユーザーと同じ名前.github.ioのリポジトリの必要がある! だからみんなorganizationだったのね・・ https://pages.github.com/
  19. 19. 動いた!! 丸できた!! 全世界に私の丸が 公開されました
  20. 20. めでたし 今後・・ 1. サーバーサイドを含む静的アプリ 1. AWS Lamdaで静的ページの作成 やらないとなぁ

×