Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
VueJS 大型專案架構
Search
Cain Chen
July 13, 2016
Technology
3
270
VueJS 大型專案架構
#假的
Cain Chen
July 13, 2016
Tweet
Share
More Decks by Cain Chen
See All by Cain Chen
[webconf 2015] 酒館的進退之道
hinablue
2
800
Famo.us - New generation of HTML5 Web Application Framework
hinablue
11
540
生在幸福的 JS 年代
hinablue
14
1.4k
WebConf2013 - Media Query 123
hinablue
19
4.2k
3SSS Presentation
hinablue
4
230
Other Decks in Technology
See All in Technology
Apple/Google/Amazonの決済システムの違いを踏まえた定期購読課金システムの構築 / abema-billing-system
cyberagentdevelopers
PRO
1
220
フルカイテン株式会社 採用資料
fullkaiten
0
36k
大規模データ基盤チームのオンプレTiDB運用への挑戦 / dpu-tidb
cyberagentdevelopers
PRO
1
110
リンクアンドモチベーション ソフトウェアエンジニア向け紹介資料 / Introduction to Link and Motivation for Software Engineers
lmi
4
290k
Figma Dev Modeで進化するデザインとエンジニアリングの協働 / figma-with-engineering
cyberagentdevelopers
PRO
1
430
よくわからんサービスについての問い合わせが来たときの強い味方 Amazon Q について
kazzpapa3
0
220
GitHub Universe: Evaluating RAG apps in GitHub Actions
pamelafox
0
180
Product Engineer Night #6プロダクトエンジニアを育む仕組み・施策
hacomono
PRO
1
470
Jr. Championsになって、強く連携しながらAWSをもっと使いたい!~AWSに対する期待と行動~
amixedcolor
0
190
VPC間の接続方法を整理してみた #自治体クラウド勉強会
non97
1
850
現地でMeet Upをやる場合の注意点〜反省点を添えて〜
shotashiratori
0
530
ユーザーの購買行動モデリングとその分析 / dsc-purchase-analysis
cyberagentdevelopers
PRO
2
100
Featured
See All Featured
Embracing the Ebb and Flow
colly
84
4.4k
Gamification - CAS2011
davidbonilla
80
5k
A designer walks into a library…
pauljervisheath
202
24k
Docker and Python
trallard
40
3.1k
For a Future-Friendly Web
brad_frost
175
9.4k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
231
17k
Large-scale JavaScript Application Architecture
addyosmani
510
110k
Into the Great Unknown - MozCon
thekraken
31
1.5k
Fontdeck: Realign not Redesign
paulrobertlloyd
81
5.2k
Faster Mobile Websites
deanohume
304
30k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
Fashionably flexible responsive web design (full day workshop)
malarkey
404
65k
Transcript
#ጱ य़ࣳ䌕礯蚏ಋୗ VueJS
Kuro Hsu http:/ /goo.gl/m8wuEQ ፡ਠ蝡㮆疰ݢ犥ૢ旉櫝樄 筕വ
Agenda VueJS चՕ奧 VueJS 疩獈䌕礯 Vuex Vue Router VueStrap JWT
+ Auth0
VueJS चՕ奧 斕ᰁ玕礍牧篷䰬ୗ粬ྛ獢纈䓚襑穩牐 ڡত玕奾䯤墋㻌牧زկݱᛔ加缏牐 .vue ӣ㮆氎磭Ӟ稞笕᪃牐 毆戔㻌ݻ翉ਧ牧䁆ᤈ硳ሲ斃֯牐 螕ݳੜࣳ翕殷䛑አ纷ୗ樄咳牐 Ӟ樄তՋ讕᮷䷱磪牐
VueJS चՕ奧 MVVM
VueJS चՕ奧
VueJS चՕ奧 Lifecycle Hooks init created beforeCompile compiled ready attached
detached beforeDestroy destroyed
VueJS चՕ奧 index.html 蚏ಋୗ
VueJS चՕ奧 main.js 蚏ಋୗ
VueJS चՕ奧 綡牫౯䷱硽֦ெ讕ਞ蕕㻟牫 vueApp ฎ䌕礯ݷ圸牧藶ۯᆙಧ牐 https:/ /github.com/vuejs/vue-cli
VueJS चՕ奧 .vue ฎزկ䲆礯ጱۅ䲆ݷ牐 ڡত玕䲆礯Ӿݢ犥ֵአ components 癲獈زկ牐 زկ蚤 ng1.x ጱ
Driective 盄觊犲ҁ፡蚏㬵牐
VueJS चՕ奧 .vue 䲆礯۱珀ӣ㮆玟璸 template script style ӣ㮆氎磭Ӟ稞笕᪃牐
VueJS चՕ奧 .vue 䲆礯<template> HTML 䰬粚 ݢ犥瞲ਧ౮ jade 襑ᥝਞ蕕 jade-loader
ֵአ mustache * 瞲㻌稞翉ਧ {{{ፗ矑蜍ڊ HTML }}} <template lang=“jade”> <div> <h1>{{ message }}</h1> <p>{{ *message }}</p> <p>{{{ messageRawHtml }}}</p> <p class="message-{{ messageId }}"></p> </div> </template> http:/ /vue-loader.vuejs.org/en/index.html
VueJS चՕ奧 .vue 䲆礯<style> CSS 䰬粚 ݢ犥瞲ਧ傶 scss/sass 襑ᥝਞ蕕 sass-loader
scoped 蔭纈蝡㮆䰬ୗݝॺ አࣁ匍磪ጱزկӤ <style lang=“scss” scoped> $primary-color: #633; .component { color: $primary-color; } </style> http:/ /vue-loader.vuejs.org/en/index.html
VueJS चՕ奧 .vue 䲆礯<script> script 䰬粚 ݢ犥瞲ਧ傶 coffee 襑ᥝਞ蕕 coffee-loader
<script lang=“coffee”> # Write your coffee script here. # 犋ᥝᘍ౯ Coffee Script. </script> http:/ /vue-loader.vuejs.org/en/index.html
VueJS चՕ奧 獵ӥጱ藶托褂筕വ Kuro Hsu ጱ墋䁭 http:/ /goo.gl/m8wuEQ ቡ
VueJS 2.0 ?
None
None
VueJS 疩獈䌕礯
VueJS 疩獈䌕礯 http:/ /vuejs.org/guide/application.html ਥොಅ砰䌃ጱই֜ୌ缏य़ࣳ䌕礯疩捝
VueJS 䌕礯襑穩 磪㮆瑿ොݢ犥硯制眲牏ਂ虻碘 蝚螂 API 膏盅ᒒ传蝢 獮ᒒᛔᤈ᪠ኧ 襑ᥝ藨挨 戔懯䒍Ӥಋฃ 獮ᒒૡ纷䒍Ӥಋฃ
VueJS 䌕礯襑穩 veux superagent vue-router JWT + Auth0 scss/sass/jade coffee
or native JavaScript
Vuex https:/ /github.com/vuejs/vuex
Vuex
VueJS + Vuex 褸Ӿୗ制眲ᓕቘ礍䯤牐 觊犲 Flux, Redux ጱ戔懯牐 䢐磪制眲虋ๅԪկ牐 ֵአ㻌Ӟ制眲䰽牐
ر战ֵ֦አӾՕ纷ଧ㬵狶ٌ犢Ԫ牐 http:/ /vuex.vuejs.org/zh-cn/index.html
https:/ /github.com/vuejs/vuex Vuex 奾䯤窕纷
Vuex च奾䯤 getters 玲 state 虻碘 mutations ਧ嬝制眲虋ๅ actions 砰䌃制眲虋ๅ㵕֢
modules 硯ᗝ加缏秇奲 store ڡত玕ጱ瑿ො
Vuex ڡত玕
Vuex 膏زկ ֵአ getters ೭ک֦ᥝጱ制眲独牐 ֵአ actions 藉咳制眲虋ๅ牐
Vuex 膏زկ ֵአ getters ೭کጱ碍独牧ࣁزկӾݢ犥አ this. ֵአ牐
Vuex 膏زկ getters 㰍胼೭ڊ碍独牧篷ဩፗ矑狕硬 store ጱ制眲牐 狕硬制眲襑ᥝֵአ mutation 㬵狕硬牐 ࣁ瑥໒秇ୗӥ牧Ꮭ硬䨝䁭梊牐
Vuex mutation mutation አ㬵ਧ嬝制眲虋ๅጱԪկ犥现ٌݷ圸牐 墋ฃጱ mutation-types.js 塅ֺ物 Ԫկ膏ٌݷ圸ፘݶฎො蘷獨牧犋Ӟਧᥝፘݶ牐 獊蟂᮷य़䌃ฎ Vue
ਥොୌ捍牧螨ع膏 getters 窾牐
蝚螂秇奲砺֢ mutations。 墋ฃጱ utility.js 塅ֺ。 蝡愊ضڡত玕ԧ state。 矑茐ਧ嬝 mutations 㵕֢牐
ኧ mutation-types 玲మ ᥝጱ制眲ݷ圸牐 䌘蝡犚制眲ݷ圸ਧ嬝傶獢碍牧 㪔ๅ硬 state。 Vuex mutation
mutation ݝݢֵአݶྍ獢碍牐 哴ݢ胼ࣁӞ樄তڡত玕 state。 dispatch ݢ癲氃क़㷢碍牐 ইຎ痀搡犋ਂࣁ牧襑ᥝ蝚螂 Vue.set ीے牧 ฎֵአ
Stage 2* 承粬೩揔牐 * https:/ /github.com/sebmarkbage/ecmascript-rest-spread Vuex mutation
actions አ㬵ݞ store አ犥虋ๅ制眲牐 墋ฃጱ actions.js 塅ֺ物 Vuex actions
action ݢ犥藉咳ग़᯿ mutations牐 action ᒫӞ㮆㷢碍ฎ store 䋿ֺ牐 ݢ犥ֵአ覍ݶྍݞ牧mutation犋ᤈ牦 ग़ actions
ፘݞ碻牧襑嘦狒蜍獈㷢碍Ӟ膌牐 Vuex actions
- ݢᛔਧ嬝 middleware 妔 Vuex ֵአ牐 - 犥ӥฎਥො塅ֺ物 Vuex middlewares
ֵአොୗ物
https:/ /github.com/vuejs/vuex Vuex 奾䯤窕纷
superagent https:/ /github.com/visionmedia/superagent Ajax with less suck
superagent
Vuex + superagent - actions 吚Ӿݢ犥ֵአ覍ݶྍ㯽蜍牐 - ݢ犥氃क़ݞ API 㬵玲虻碘牐
- 蝡ฎ墋ฃጱጭ獈ොဩ。
action ݢ犥藉咳ग़᯿ mutations牐 ݢ犥ֵአ覍ݶྍݞ牧mutation犋ᤈ牦 Vuex action + superagent
Vue-router https:/ /github.com/vuejs/vue-router
vue-router
VueJS + vue-router 獮ᒒ᪠ኧྋ॥牐 ֢ဩ蚤ݱय़礍य़ݶੜ吖牐 ݢ犥狶 Nested牧㮆Ո憽 view 䌃蚏㬵ഇො牐 $router
ݢ犥ᛔਧ嬝痀碍独牧ݢአෝ獊ऒ牐 䰬粚Ӿݢֵአ $route ೭ڊ碍独牐 磪 hooks ݢ犥ֵአ牧አෝ矒ګ᪠ኧ窕纷牐
vue-router
vue-router 戔ਧ殻ፓ hashbang history abstract root linkActiveClass saveScrollPosition transitionOnLoad suppressTransitionError
# 㰍 HTML5 History 秇ୗӥݢአ牐
vue-router Nested ֵአ subRoutes 瞲ਧ્ॺጱ᪠ኧزկ牐
vue-router Nested ࣁӞ㮆زկ䰬粚Ӿֵአ <router-view>牧㳷 ಅ痀ጱ subRoutes 疰䨝ᗝ獈ࣁ䰬粚ጱ <router-view> ಅࣁ֖ᗝ牐
vue-router Pipeline ᪠ኧ虋矦碻牧ݢ蝚螂 Pipeline 膏ٌ hooks 㬵᯿奲زկ牐 data activate deactivate
canActivate canDeacivate canReuse /foo/boo/qoo /foo/goo/ooo ?
vue-router Hooks data አෝ斉獈吚獮 route ጱزկ膏虻碘碻藉咳牐 activate زկࣁୌ缏褩ྦྷ牧扗奲կᤩ獺ୌӬ蝱獈 route
ԏ獮藉咳牐 deactivate زկࣁୌ缏褩ྦྷ牧扗奲կܨ疥ᤩ纔አᑏᴻ碻藉咳牐
vue-router Hooks canActivate ࣁ涢挨褩ྦྷ牧吚زկܨ疥ᤩ્獈碻藉咳牐 canDeactivate ࣁ涢挨褩ྦྷ牧吚زկܨ疥ᤩᑏᴻ碻藉咳牐 canReuse 涢挨Ӟ㮆زկฎ玽ݢ犥ᤩ᯿蕦ֵአ牧毆戔独傶 true牐
vue-router Hooks data, activate, deactivate ᮷殾蜴ࢧ Promise ۱珀 Promise ጱᇔկ牐
canActivate, canDeactivate ݢ螡䢔蜴ࢧ Promise Boolean牐 canReuse 殾蜴ࢧ Boolean牐
vue-router Hooks http:/ /router.vuejs.org/zh-cn/pipeline/index.html
vue-router Hooks http:/ /router.vuejs.org/zh-cn/pipeline/index.html
vue-router Hooks http:/ /router.vuejs.org/zh-cn/pipeline/index.html
vue-router APIs start stop map on go replace redirect alias
beforeEach afterEach
VueStrap https:/ /github.com/yuche/vue-strap
VueStrap
VueStrap ֵአොୗ蚤 angularStrap 襊ݶ牐 犋狅蚅犨֜ॺկҁᴻԧ VueJS牐 襑ᛔᤈ癲獈 Bootstrap 3.x.x CSS牐
VueStrap
VueStrap
VueStrap
VueStrap ݝᥝ䨝䌃 Bootstrap 疰ݢ犥樄咳牐 戔懯䒍膏獮ᒒૡ纷䒍砇蟴槹移犵牐 氃क़ॺկ疩獈斃傶揲ૡ牐
JWT + Auth0
JWT + Auth0 獊ݷ傶 JSON Web Token牐 犥 PHP 傶ֺ牧ݢ犥ֵአ
firebase/php-jwt 㬵叨ኞ牐 犋ฎ碝ጱ䩚ᥜ牐 ๅग़ JWT+auth0 with VueJS ݢ㷢ᘍ https:/ /goo.gl/gdf3H8
JWT + Auth0 犥 Vuex 吚Ӿጱ actions 玲 Token牐 㱪ਂෝ
store 吚Ӿ牐 疥 Token ࢧ䌃ᛗ header Authorization牐 ֵአ localStorage 氃क़㱪ਂ Token牐 ֵአ Cookie 㱪ਂ牐
JWT + Auth0 https:/ /goo.gl/gdf3H8
JWT + Auth0 https:/ /goo.gl/gdf3H8
㷢ᘍկ https:/ /auth0.com/blog/2015/11/13/build-an-app-with- vuejs/ https:/ /yuche.github.io/vue-strap/ http:/ /vuex.vuejs.org/en/index.html http:/ /router.vuejs.org/en/index.html
https:/ /vuejs.org
Thanks