Upgrade to Pro — share decks privately, control downloads, hide ads and more …

vue-cli 3.0時代のNuxt.js

vue-cli 3.0時代のNuxt.js

vue-cli 3.0からプロジェクトのカスタマイズがtemplate方式からplugin方式に変わったので、Nuxt starter pluginを作りました

5c97d6b5611feeebc345c3e4742a05a8?s=128

andoshin11

March 27, 2018
Tweet

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