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
Mastering Quickfix
daisuzu
1
140
SREが投資するAIOps ~ペアーズにおけるLLM for Developerへの取り組み~
takumiogawa
2
500
データプロダクトの定義からはじめる、データコントラクト駆動なデータ基盤
chanyou0311
2
350
なぜ今 AI Agent なのか _近藤憲児
kenjikondobai
4
1.4k
【Pycon mini 東海 2024】Google Colaboratoryで試すVLM
kazuhitotakahashi
2
560
OS 標準のデザインシステムを超えて - より柔軟な Flutter テーマ管理 | FlutterKaigi 2024
ronnnnn
1
300
Platform Engineering for Software Developers and Architects
syntasso
1
520
SDN の Hype Cycle を一通り経験してみて思うこと / Going through the Hype Cycle of SDN
mshindo
1
140
インフラとバックエンドとフロントエンドをくまなく調べて遅いアプリを早くした件
tubone24
1
430
DynamoDB でスロットリングが発生したとき/when_throttling_occurs_in_dynamodb_short
emiki
0
270
マルチプロダクトな開発組織で 「開発生産性」に向き合うために試みたこと / Improving Multi-Product Dev Productivity
sugamasao
1
310
OCI Network Firewall 概要
oracle4engineer
PRO
0
4.2k
Featured
See All Featured
BBQ
matthewcrist
85
9.3k
How to train your dragon (web standard)
notwaldorf
88
5.7k
Become a Pro
speakerdeck
PRO
25
5k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
364
24k
Build The Right Thing And Hit Your Dates
maggiecrowley
33
2.4k
Rebuilding a faster, lazier Slack
samanthasiow
79
8.7k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
232
17k
Navigating Team Friction
lara
183
14k
Practical Orchestrator
shlominoach
186
10k
How to Think Like a Performance Engineer
csswizardry
20
1.1k
Six Lessons from altMBA
skipperchong
27
3.5k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
93
16k
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