vue-cli 3.0時代のNuxt.js

by andoshin11

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