vue js 大型專案架構
TRANSCRIPT
#
VueJS
Kuro Hsuhttp://goo.gl/m8wuEQ
AgendaVueJS
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 .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 2.0 ?
VueJS
VueJS http://vuejs.org/guide/application.html
VueJS
API
VueJS veux
superagent
vue-router
JWT + Auth0
scss/sass/jade
coffee or native JavaScript
Vuexhttps://github.com/vuejs/vuex
Vuex
VueJS + Vuex
Flux, Redux
http://vuex.vuejs.org/zh-cn/index.html
Vuex getters
state mutations
actions
modules
store
Vuex
Vuex getters actions
Vuex getters this.
Vuex
getters store mutation
Vuex mutationmutation
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
superagent
https://github.com/visionmedia/superagent
Ajax with less suck
superagent
Vuex + superagent- actions - API - 。
action mutationsmutation
Vuex action + superagent
Vue-routerhttps://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
VueStraphttps://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
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