Share
Embed
Slide 1
Slide 1 text
Nuxt Meetup #1
株式会社 merpay Software Engineer (Frontend)
Shin Ando (@andoshin11)
vue-cli 3.0時代のNuxt.js
Slide 2
Slide 2 text
自己紹介
• Shin Ando (@andoshin11)
• Software Engineer (Frontend)
• merpay, Inc (2018/3〜)
• Skills
• Vue.js
• React Native
• Rails
Slide 3
Slide 3 text
信用を創造して、なめらかな社会を創る
Slide 4
Slide 4 text
Vue conf Amsterdam参加してきました!!
Slide 5
Slide 5 text
vue-cli 3.0がやってくる!!
● Plugin Based Architecture
● Zero config by default
● Everything configurable without need for eject
still in beta 6...
Slide 6
Slide 6 text
vue-cli 3.0がやってくる!!
$ vue init my-app
$ vue create my-app
$ vue add // add custom plugin
Legacy way...
Modern way (^3.0.0)
Slide 7
Slide 7 text
ところでみなさん...
Nuxt、やっていますか？
Slide 8
Slide 8 text
ところでみなさん...
Nuxt、どうやっていますか？?
Slide 9
Slide 9 text
公式によると...
https://nuxtjs.org/guide/installation
Slide 10
Slide 10 text
No content
Slide 11
Slide 11 text
Pluginを作るぞ :muscle:
https://github.com/vuejs/vue-cli/blob/dev/docs/plugin-dev.md
Slide 12
Slide 12 text
Pluginの作成：
$ vue add されたときにgeneratorが実行される
Slide 13
Slide 13 text
Pluginの作成：/generator
● /template 以下にプロジェクトにつっこみ
たいファイルを用意する
Slide 14
Slide 14 text
Pluginの作成：/generator/index.js
● /template 以下にプロジェクトにつっこみ
たいファイルを用意する
● index.jsでpackage.jsonを拡張
Slide 15
Slide 15 text
Pluginの作成：/generator/index.js
● /template 以下にプロジェクトにつっこみ
たいファイルを用意する
● Index.jsでpackage.jsonを拡張
● index.js にtemplateの書き込み処理を記
述
Slide 16
Slide 16 text
Pluginの作成：/generator/index.js
元々 /src に存在したファイルは /src/legacy 以下に移動する(力技)
Slide 17
Slide 17 text
出来ました :clap: :clap:
https://github.com/andoshin11/vue-cli-plugin-nuxt-starter-template
Slide 18
Slide 18 text
DEMO
Slide 19
Slide 19 text
ハマりどころ
Babelのpreset指定しないと死ぬ
(inside nuxt.config.js)
Slide 20
Slide 20 text
ハマりどころ
Generator APIのhookが少ない。
除外リスト作成
↓
/src にtemplate書き込み
↓
/src のファイルスキャン(postProcessFiles)
↓
除外リストになければファイル移動
という4度手間に...
Slide 21
Slide 21 text
ハマりどころ
既存ファイルとの衝突
Slide 22
Slide 22 text
まとめ
● vue-cli 3.0はいいぞ！
● ボイラープレートはvue-cli。そこにNuxtをのっける
● Nuxtの立ち位置が変化
「Vuexやvue-routerの設定まとめてやってくれる。ついでにSSRもできる」
↓
「SSRのためのフレームワーク」
Slide 23
Slide 23 text
Thanks, and Happy Nuxt Life!!
@andoshin11