vue-cli 3.0時代のNuxt.js

Transcript

1. Nuxt Meetup #1 株式会社 merpay Software Engineer (Frontend) Shin Ando

   (@andoshin11) vue-cli 3.0時代のNuxt.js

2. 自己紹介 • Shin Ando (@andoshin11) • Software Engineer (Frontend) •

   merpay, Inc (2018/3〜) • Skills • Vue.js • React Native • Rails

3. 信用を創造して、なめらかな社会を創る

4. Vue conf Amsterdam参加してきました!!

5. vue-cli 3.0がやってくる!! • Plugin Based Architecture • Zero config by

   default • Everything configurable without need for eject still in beta 6...

6. vue-cli 3.0がやってくる!! $ vue init <template> my-app $ vue create

   my-app $ vue add <plugin> // add custom plugin Legacy way... Modern way (^3.0.0)

7. ところでみなさん... Nuxt、やっていますか？

8. ところでみなさん... Nuxt、どうやっていますか？?

9. 公式によると... https://nuxtjs.org/guide/installation

10. None

11. Pluginを作るぞ :muscle: https://github.com/vuejs/vue-cli/blob/dev/docs/plugin-dev.md

12. Pluginの作成： $ vue add されたときにgeneratorが実行される

13. Pluginの作成：/generator • /template 以下にプロジェクトにつっこみ たいファイルを用意する

14. Pluginの作成：/generator/index.js • /template 以下にプロジェクトにつっこみ たいファイルを用意する • index.jsでpackage.jsonを拡張

15. Pluginの作成：/generator/index.js • /template 以下にプロジェクトにつっこみ たいファイルを用意する • Index.jsでpackage.jsonを拡張 • index.js にtemplateの書き込み処理を記

    述

16. Pluginの作成：/generator/index.js 元々 /src に存在したファイルは /src/legacy 以下に移動する(力技)

17. 出来ました :clap: :clap: https://github.com/andoshin11/vue-cli-plugin-nuxt-starter-template

18. DEMO

19. ハマりどころ Babelのpreset指定しないと死ぬ (inside nuxt.config.js)

20. ハマりどころ Generator APIのhookが少ない。 除外リスト作成 ↓ /src にtemplate書き込み ↓ /src のファイルスキャン(postProcessFiles)

    ↓ 除外リストになければファイル移動 という4度手間に...

21. ハマりどころ 既存ファイルとの衝突

22. まとめ • vue-cli 3.0はいいぞ！ • ボイラープレートはvue-cli。そこにNuxtをのっける • Nuxtの立ち位置が変化 「Vuexやvue-routerの設定まとめてやってくれる。ついでにSSRもできる」 ↓

    「SSRのためのフレームワーク」

23. Thanks, and Happy Nuxt Life!! @andoshin11