Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
vue-cli 3.0時代のNuxt.js
andoshin11
March 27, 2018
Programming
3
5.4k
vue-cli 3.0時代のNuxt.js
vue-cli 3.0からプロジェクトのカスタマイズがtemplate方式からplugin方式に変わったので、Nuxt starter pluginを作りました
andoshin11
March 27, 2018
Tweet
Share
More Decks by andoshin11
See All by andoshin11
Private Cloudを支える最高のユーザーガイド運用技術
andoshin11
0
190
TS CompilerがVueを喋れても良いじゃないか
andoshin11
0
470
ain't giving up type-safe Express
andoshin11
2
300
Type Safe "Everything"
andoshin11
0
150
Hack your Nuxt router!
andoshin11
0
870
GatewayパターンとSchema駆動開発
andoshin11
8
1.1k
Catch up Nuxt.js 2019.02
andoshin11
0
1.4k
The future of Nuxt.js with TypeScript
andoshin11
0
54
Clean Architecture with Vue
andoshin11
14
7.7k
Other Decks in Programming
See All in Programming
TSDサービスRecap ~PMBOK®ガイド第7版超速まるわかりガイド~|ミツエーリンクスTSD
mlctsd
0
100
Update from the Elixir team - 2022
whatyouhide
0
160
プログラミングを勉強したいと言われたら
yuba_4
0
390
TechFeed Conference 2022 - Kotlin Experimental
jmatsu
0
730
よりUXに近いSLI・SLOの運用による可用性の再設計
kazumanagano
3
500
バンドル最適化マニアクス at tfconf
mizchi
3
2.2k
Node.js 最新動向 TFCon 2022
yosuke_furukawa
PRO
6
2.8k
もしも、 上司に鬼退治を命じられたら~プロジェクト計画編~
higuuu
0
270
読みやすいコードを書こう
yutorin
0
400
コードの解析と言語習得の心得
jinjin33333
0
130
Go API クライアントの実装 〜Go Conference に載せれなかったTIPS〜
yyoshiki41
0
190
코드 품질 1% 올리기
pluu
1
960
Featured
See All Featured
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
349
27k
Designing on Purpose - Digital PM Summit 2013
jponch
106
5.6k
Mobile First: as difficult as doing things right
swwweet
212
7.5k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
224
49k
The MySQL Ecosystem @ GitHub 2015
samlambert
238
11k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_i
21
14k
A Modern Web Designer's Workflow
chriscoyier
689
180k
Building Flexible Design Systems
yeseniaperezcruz
310
33k
How to train your dragon (web standard)
notwaldorf
57
3.8k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
181
15k
WebSockets: Embracing the real-time Web
robhawkes
57
5k
Adopting Sorbet at Scale
ufuk
63
7.5k
Transcript
Nuxt Meetup #1 株式会社 merpay Software Engineer (Frontend) Shin Ando
(@andoshin11) vue-cli 3.0時代のNuxt.js
自己紹介 • Shin Ando (@andoshin11) • Software Engineer (Frontend) •
merpay, Inc (2018/3〜) • Skills • Vue.js • React Native • Rails
信用を創造して、なめらかな社会を創る
Vue conf Amsterdam参加してきました!!
vue-cli 3.0がやってくる!! • Plugin Based Architecture • Zero config by
default • Everything configurable without need for eject still in beta 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)
ところでみなさん... Nuxt、やっていますか?
ところでみなさん... Nuxt、どうやっていますか??
公式によると... https://nuxtjs.org/guide/installation
None
Pluginを作るぞ :muscle: https://github.com/vuejs/vue-cli/blob/dev/docs/plugin-dev.md
Pluginの作成: $ vue add されたときにgeneratorが実行される
Pluginの作成:/generator • /template 以下にプロジェクトにつっこみ たいファイルを用意する
Pluginの作成:/generator/index.js • /template 以下にプロジェクトにつっこみ たいファイルを用意する • index.jsでpackage.jsonを拡張
Pluginの作成:/generator/index.js • /template 以下にプロジェクトにつっこみ たいファイルを用意する • Index.jsでpackage.jsonを拡張 • index.js にtemplateの書き込み処理を記
述
Pluginの作成:/generator/index.js 元々 /src に存在したファイルは /src/legacy 以下に移動する(力技)
出来ました :clap: :clap: https://github.com/andoshin11/vue-cli-plugin-nuxt-starter-template
DEMO
ハマりどころ Babelのpreset指定しないと死ぬ (inside nuxt.config.js)
ハマりどころ Generator APIのhookが少ない。 除外リスト作成 ↓ /src にtemplate書き込み ↓ /src のファイルスキャン(postProcessFiles)
↓ 除外リストになければファイル移動 という4度手間に...
ハマりどころ 既存ファイルとの衝突
まとめ • vue-cli 3.0はいいぞ! • ボイラープレートはvue-cli。そこにNuxtをのっける • Nuxtの立ち位置が変化 「Vuexやvue-routerの設定まとめてやってくれる。ついでにSSRもできる」 ↓
「SSRのためのフレームワーク」
Thanks, and Happy Nuxt Life!! @andoshin11