vue js 大型專案架構
TRANSCRIPT
![Page 1: Vue js 大型專案架構](https://reader038.vdocuments.mx/reader038/viewer/2022102322/586fda501a28ab18428b5ccd/html5/thumbnails/1.jpg)
#
VueJS
![Page 3: Vue js 大型專案架構](https://reader038.vdocuments.mx/reader038/viewer/2022102322/586fda501a28ab18428b5ccd/html5/thumbnails/3.jpg)
AgendaVueJS
VueJS
Vuex
Vue Router
VueStrap
JWT + Auth0
![Page 4: Vue js 大型專案架構](https://reader038.vdocuments.mx/reader038/viewer/2022102322/586fda501a28ab18428b5ccd/html5/thumbnails/4.jpg)
VueJS
.vue
![Page 5: Vue js 大型專案架構](https://reader038.vdocuments.mx/reader038/viewer/2022102322/586fda501a28ab18428b5ccd/html5/thumbnails/5.jpg)
VueJS
MVVM
![Page 6: Vue js 大型專案架構](https://reader038.vdocuments.mx/reader038/viewer/2022102322/586fda501a28ab18428b5ccd/html5/thumbnails/6.jpg)
VueJS
![Page 7: Vue js 大型專案架構](https://reader038.vdocuments.mx/reader038/viewer/2022102322/586fda501a28ab18428b5ccd/html5/thumbnails/7.jpg)
VueJS Lifecycle Hooks
init created beforeCompile compiled ready attached detached beforeDestroy destroyed
![Page 8: Vue js 大型專案架構](https://reader038.vdocuments.mx/reader038/viewer/2022102322/586fda501a28ab18428b5ccd/html5/thumbnails/8.jpg)
VueJS index.html
![Page 9: Vue js 大型專案架構](https://reader038.vdocuments.mx/reader038/viewer/2022102322/586fda501a28ab18428b5ccd/html5/thumbnails/9.jpg)
VueJS main.js
![Page 11: Vue js 大型專案架構](https://reader038.vdocuments.mx/reader038/viewer/2022102322/586fda501a28ab18428b5ccd/html5/thumbnails/11.jpg)
VueJS .vue
components ng1.x Driective
![Page 12: Vue js 大型專案架構](https://reader038.vdocuments.mx/reader038/viewer/2022102322/586fda501a28ab18428b5ccd/html5/thumbnails/12.jpg)
VueJS .vue
template
script
style
![Page 13: Vue js 大型專案架構](https://reader038.vdocuments.mx/reader038/viewer/2022102322/586fda501a28ab18428b5ccd/html5/thumbnails/13.jpg)
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
![Page 14: Vue js 大型專案架構](https://reader038.vdocuments.mx/reader038/viewer/2022102322/586fda501a28ab18428b5ccd/html5/thumbnails/14.jpg)
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
![Page 15: Vue js 大型專案架構](https://reader038.vdocuments.mx/reader038/viewer/2022102322/586fda501a28ab18428b5ccd/html5/thumbnails/15.jpg)
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
![Page 17: Vue js 大型專案架構](https://reader038.vdocuments.mx/reader038/viewer/2022102322/586fda501a28ab18428b5ccd/html5/thumbnails/17.jpg)
VueJS 2.0 ?
![Page 18: Vue js 大型專案架構](https://reader038.vdocuments.mx/reader038/viewer/2022102322/586fda501a28ab18428b5ccd/html5/thumbnails/18.jpg)
![Page 19: Vue js 大型專案架構](https://reader038.vdocuments.mx/reader038/viewer/2022102322/586fda501a28ab18428b5ccd/html5/thumbnails/19.jpg)
![Page 20: Vue js 大型專案架構](https://reader038.vdocuments.mx/reader038/viewer/2022102322/586fda501a28ab18428b5ccd/html5/thumbnails/20.jpg)
VueJS
![Page 22: Vue js 大型專案架構](https://reader038.vdocuments.mx/reader038/viewer/2022102322/586fda501a28ab18428b5ccd/html5/thumbnails/22.jpg)
VueJS
API
![Page 23: Vue js 大型專案架構](https://reader038.vdocuments.mx/reader038/viewer/2022102322/586fda501a28ab18428b5ccd/html5/thumbnails/23.jpg)
VueJS veux
superagent
vue-router
JWT + Auth0
scss/sass/jade
coffee or native JavaScript
![Page 25: Vue js 大型專案架構](https://reader038.vdocuments.mx/reader038/viewer/2022102322/586fda501a28ab18428b5ccd/html5/thumbnails/25.jpg)
Vuex
![Page 26: Vue js 大型專案架構](https://reader038.vdocuments.mx/reader038/viewer/2022102322/586fda501a28ab18428b5ccd/html5/thumbnails/26.jpg)
VueJS + Vuex
Flux, Redux
http://vuex.vuejs.org/zh-cn/index.html
![Page 28: Vue js 大型專案架構](https://reader038.vdocuments.mx/reader038/viewer/2022102322/586fda501a28ab18428b5ccd/html5/thumbnails/28.jpg)
Vuex getters
state mutations
actions
modules
store
![Page 29: Vue js 大型專案架構](https://reader038.vdocuments.mx/reader038/viewer/2022102322/586fda501a28ab18428b5ccd/html5/thumbnails/29.jpg)
Vuex
![Page 30: Vue js 大型專案架構](https://reader038.vdocuments.mx/reader038/viewer/2022102322/586fda501a28ab18428b5ccd/html5/thumbnails/30.jpg)
Vuex getters actions
![Page 31: Vue js 大型專案架構](https://reader038.vdocuments.mx/reader038/viewer/2022102322/586fda501a28ab18428b5ccd/html5/thumbnails/31.jpg)
Vuex getters this.
![Page 32: Vue js 大型專案架構](https://reader038.vdocuments.mx/reader038/viewer/2022102322/586fda501a28ab18428b5ccd/html5/thumbnails/32.jpg)
Vuex
getters store mutation
![Page 33: Vue js 大型專案架構](https://reader038.vdocuments.mx/reader038/viewer/2022102322/586fda501a28ab18428b5ccd/html5/thumbnails/33.jpg)
Vuex mutationmutation
mutation-types.js
Vue getters
![Page 34: Vue js 大型專案架構](https://reader038.vdocuments.mx/reader038/viewer/2022102322/586fda501a28ab18428b5ccd/html5/thumbnails/34.jpg)
mutations。 utility.js 。
state。 mutations
mutation-types
state。
Vuex mutation
![Page 35: Vue js 大型專案架構](https://reader038.vdocuments.mx/reader038/viewer/2022102322/586fda501a28ab18428b5ccd/html5/thumbnails/35.jpg)
mutation state。
dispatch Vue.set
Stage 2*
* https://github.com/sebmarkbage/ecmascript-rest-spread
Vuex mutation
![Page 36: Vue js 大型專案架構](https://reader038.vdocuments.mx/reader038/viewer/2022102322/586fda501a28ab18428b5ccd/html5/thumbnails/36.jpg)
actions store actions.js
Vuex actions
![Page 37: Vue js 大型專案架構](https://reader038.vdocuments.mx/reader038/viewer/2022102322/586fda501a28ab18428b5ccd/html5/thumbnails/37.jpg)
action mutations action store
mutation actions
Vuex actions
![Page 38: Vue js 大型專案架構](https://reader038.vdocuments.mx/reader038/viewer/2022102322/586fda501a28ab18428b5ccd/html5/thumbnails/38.jpg)
- middleware Vuex -
Vuex middlewares
![Page 40: Vue js 大型專案架構](https://reader038.vdocuments.mx/reader038/viewer/2022102322/586fda501a28ab18428b5ccd/html5/thumbnails/40.jpg)
superagent
https://github.com/visionmedia/superagent
Ajax with less suck
![Page 41: Vue js 大型專案架構](https://reader038.vdocuments.mx/reader038/viewer/2022102322/586fda501a28ab18428b5ccd/html5/thumbnails/41.jpg)
superagent
![Page 42: Vue js 大型專案架構](https://reader038.vdocuments.mx/reader038/viewer/2022102322/586fda501a28ab18428b5ccd/html5/thumbnails/42.jpg)
Vuex + superagent- actions - API - 。
![Page 43: Vue js 大型專案架構](https://reader038.vdocuments.mx/reader038/viewer/2022102322/586fda501a28ab18428b5ccd/html5/thumbnails/43.jpg)
action mutationsmutation
Vuex action + superagent
![Page 45: Vue js 大型專案架構](https://reader038.vdocuments.mx/reader038/viewer/2022102322/586fda501a28ab18428b5ccd/html5/thumbnails/45.jpg)
vue-router
![Page 46: Vue js 大型專案架構](https://reader038.vdocuments.mx/reader038/viewer/2022102322/586fda501a28ab18428b5ccd/html5/thumbnails/46.jpg)
VueJS + vue-router
Nested view $router
$route hooks
![Page 47: Vue js 大型專案架構](https://reader038.vdocuments.mx/reader038/viewer/2022102322/586fda501a28ab18428b5ccd/html5/thumbnails/47.jpg)
vue-router
![Page 48: Vue js 大型專案架構](https://reader038.vdocuments.mx/reader038/viewer/2022102322/586fda501a28ab18428b5ccd/html5/thumbnails/48.jpg)
vue-router hashbang history abstract root linkActiveClass saveScrollPosition transitionOnLoad suppressTransitionError
# HTML5 History
![Page 49: Vue js 大型專案架構](https://reader038.vdocuments.mx/reader038/viewer/2022102322/586fda501a28ab18428b5ccd/html5/thumbnails/49.jpg)
vue-router Nested
subRoutes
![Page 50: Vue js 大型專案架構](https://reader038.vdocuments.mx/reader038/viewer/2022102322/586fda501a28ab18428b5ccd/html5/thumbnails/50.jpg)
vue-router Nested
<router-view> subRoutes
<router-view>
![Page 51: Vue js 大型專案架構](https://reader038.vdocuments.mx/reader038/viewer/2022102322/586fda501a28ab18428b5ccd/html5/thumbnails/51.jpg)
vue-router Pipeline
Pipeline hooks
data activate deactivate canActivate canDeacivate canReuse
/foo/boo/qoo
/foo/goo/ooo?
![Page 52: Vue js 大型專案架構](https://reader038.vdocuments.mx/reader038/viewer/2022102322/586fda501a28ab18428b5ccd/html5/thumbnails/52.jpg)
vue-router Hooks
data route
activate route
deactivate
![Page 53: Vue js 大型專案架構](https://reader038.vdocuments.mx/reader038/viewer/2022102322/586fda501a28ab18428b5ccd/html5/thumbnails/53.jpg)
vue-router Hooks
canActivate
canDeactivate
canReuse true
![Page 54: Vue js 大型專案架構](https://reader038.vdocuments.mx/reader038/viewer/2022102322/586fda501a28ab18428b5ccd/html5/thumbnails/54.jpg)
vue-router Hooks
data, activate, deactivate Promise Promise canActivate, canDeactivate Promise Boolean canReuse Boolean
![Page 55: Vue js 大型專案架構](https://reader038.vdocuments.mx/reader038/viewer/2022102322/586fda501a28ab18428b5ccd/html5/thumbnails/55.jpg)
vue-router Hooks
http://router.vuejs.org/zh-cn/pipeline/index.html
![Page 56: Vue js 大型專案架構](https://reader038.vdocuments.mx/reader038/viewer/2022102322/586fda501a28ab18428b5ccd/html5/thumbnails/56.jpg)
vue-router Hooks
http://router.vuejs.org/zh-cn/pipeline/index.html
![Page 57: Vue js 大型專案架構](https://reader038.vdocuments.mx/reader038/viewer/2022102322/586fda501a28ab18428b5ccd/html5/thumbnails/57.jpg)
vue-router Hooks
http://router.vuejs.org/zh-cn/pipeline/index.html
![Page 58: Vue js 大型專案架構](https://reader038.vdocuments.mx/reader038/viewer/2022102322/586fda501a28ab18428b5ccd/html5/thumbnails/58.jpg)
vue-router APIs
start
stop
map
on
go
replace
redirect
alias
beforeEach
afterEach
![Page 60: Vue js 大型專案架構](https://reader038.vdocuments.mx/reader038/viewer/2022102322/586fda501a28ab18428b5ccd/html5/thumbnails/60.jpg)
VueStrap
![Page 61: Vue js 大型專案架構](https://reader038.vdocuments.mx/reader038/viewer/2022102322/586fda501a28ab18428b5ccd/html5/thumbnails/61.jpg)
VueStrap
angularStrap
VueJS
Bootstrap 3.x.x CSS
![Page 62: Vue js 大型專案架構](https://reader038.vdocuments.mx/reader038/viewer/2022102322/586fda501a28ab18428b5ccd/html5/thumbnails/62.jpg)
VueStrap
![Page 63: Vue js 大型專案架構](https://reader038.vdocuments.mx/reader038/viewer/2022102322/586fda501a28ab18428b5ccd/html5/thumbnails/63.jpg)
VueStrap
![Page 64: Vue js 大型專案架構](https://reader038.vdocuments.mx/reader038/viewer/2022102322/586fda501a28ab18428b5ccd/html5/thumbnails/64.jpg)
VueStrap
![Page 65: Vue js 大型專案架構](https://reader038.vdocuments.mx/reader038/viewer/2022102322/586fda501a28ab18428b5ccd/html5/thumbnails/65.jpg)
VueStrap
Bootstrap
![Page 66: Vue js 大型專案架構](https://reader038.vdocuments.mx/reader038/viewer/2022102322/586fda501a28ab18428b5ccd/html5/thumbnails/66.jpg)
JWT + Auth0
![Page 67: Vue js 大型專案架構](https://reader038.vdocuments.mx/reader038/viewer/2022102322/586fda501a28ab18428b5ccd/html5/thumbnails/67.jpg)
JWT + Auth0 JSON Web Token
PHP firebase/php-jwt
JWT+auth0 with VueJS https://goo.gl/gdf3H8
![Page 68: Vue js 大型專案架構](https://reader038.vdocuments.mx/reader038/viewer/2022102322/586fda501a28ab18428b5ccd/html5/thumbnails/68.jpg)
JWT + Auth0 Vuex actions Token
store
Token header Authorization
localStorage Token
Cookie
![Page 71: Vue js 大型專案架構](https://reader038.vdocuments.mx/reader038/viewer/2022102322/586fda501a28ab18428b5ccd/html5/thumbnails/71.jpg)
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
![Page 72: Vue js 大型專案架構](https://reader038.vdocuments.mx/reader038/viewer/2022102322/586fda501a28ab18428b5ccd/html5/thumbnails/72.jpg)
Thanks