Vue js 大型專案架構

#

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

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 ?

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

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 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

https://github.com/vuejs/vuex

Vuex

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

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