Tweet
Tweet

Slide 1

Slide 1 text

Nuxt.jsでサービス開発 して困ったこと Takanori Oki @Nuxt.js meetup #2

Slide 2

Slide 2 text

自己紹介 • Takanori Oki (@takanorip) • 株式会社スマートドライブ • フロントエンドエンジニア 
 (Nuxt.js、React、Polymer、ウェブ制作全般) • Polymer Japan 翻訳チーム

Slide 3

Slide 3 text

SmartDrive Cars

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

困ったこと of Nuxt.js on サービス開発

Slide 6

Slide 6 text

結論 : あんまり困らなかった

Slide 7

Slide 7 text

公式ドキュメントとissueとPRを 読めばだいたい解決する

Slide 8

Slide 8 text

基本的だけど超大事

Slide 9

Slide 9 text

nuxt/nuxt.js nuxt-community

Slide 10

Slide 10 text

maxChunkSize • nuxt.config.jsのbuildオプションの中にある • nuxt buildした時に生成されるJSファイルの 上限を設定するオプション • 設定した数値よりファイルサイズが小さくな るように分割してくれる

Slide 11

Slide 11 text

maxChunkSize • 使うとなんかエラーになる • Uncaught ReferenceError: webpackJsonp is not defined • 詳しい人おしえてください

Slide 12

Slide 12 text

外部JS動作しない問題 • Messengerのチャットplugin使いたい • window.onloadの時しかJSが作動しないので ページ遷移してDOMが変わると二度と動かな い • ページコンポーネントのcreate()でloadイベン トを発火させることで解決

Slide 13

Slide 13 text

No content

Slide 14

Slide 14 text

IEでVuexが動かない • babel-polyfillを食わせる

Slide 15

Slide 15 text

ライブラリをNuxtに組み込みたい • lodashとかよく使うライブラリをいちいち importするのめんどくさい • pluginでVueとNuxt.jsに組み込む • 余力があればモジュールとして公開
 https://ja.nuxtjs.org/guide/modules

Slide 16

Slide 16 text

No content

Slide 17

Slide 17 text

やっとくと良いこと

Slide 18

Slide 18 text

ローディング最適化 • APIへのアクセスはasyncDataやfetchの中で
 行う • vendorへの登録忘れない • pwa-moduleは入れといたほうが良い

Slide 19

Slide 19 text

おわり （フォント：コーポレート・ロゴ丸、源柔ゴシック）