Vue.js 大規模アプリケーションの構築

38bee248082f6071230de65e9d74a944?s=47 kazupon
January 08, 2016

Vue.js 大規模アプリケーションの構築

38bee248082f6071230de65e9d74a944?s=128

kazupon

January 08, 2016
Tweet

Transcript

  1. 22.

    ఏڙ͢ΔެࣜϓϥάΠϯ • ϧʔλ: vue-router • ௨৴: vue-resource • ϑΥʔϜ޲͚όϦσʔλ: vue-validator

    • ඇಉظσʔλಡࠐ: vue-async-data • RxJS όΠϯσΟϯά: vue-rx ͳͲ
  2. 26.

    VueServer.js • ϩγΞͷNGS.RUࣾͱ͍͏ αʔυϕϯμ͕ఏڙ͢Δ OSSʹΑͬͯαʔόαΠυϨ ϯμϦϯά΋Մೳʹͳͬͨ
 https://github.com/ ngsru/vue-server • αʔόαΠυͰ΋ΫϥΠΞ

    ϯταΠυͷVue.jsΛ΄΅ ಉ͡I/F var vueServer = require('vue-server') var Vue = new vueServer.renderer() var vm = new Vue({ template: '<my-component></my-component>', components: { myComponent: { template: '<div>hello world</div>' } } }) vm.$on('vueServer.htmlReady', function (html) { console.log(html) })
  3. 34.

    vue-cli • ͳΔ΂͘ർ࿑͠ͳ͍Α͏ʹ͢ΔͨΊɺ͍ͭ࠷ۙ(2015- 12-28)ɺVue.js ϓϩδΣΫτ޲͚ʹ Scaffolding πʔϧΛఏڙ
 https://github.com/vuejs/vue-cli $ npm

    install -g vue-cli $ vue init webpack my-project # ϓϩϯϓτ΁ճ౴ $ cd my-project $ npm install $ npm run dev # υδϟʔϯ!
  4. 35.

    vue-cli • Webpack / Browserify ޲͚ʹԼهΛ2छྨʹΑͬͯ։ൃ؀ڥ ηοτΞοϓΛࢧԉ • γϯϓϧόʔδϣϯ (খن໛ΞϓϦɺϓϩτλΠϓ޲͖)


    τϥϯεύΠϥɺvue-loader/vuerifyɺ։ൃ༻؆қαʔό • ϑϧελοΫόʔδϣϯ (େن໛ΞϓϦ޲͖)
 ্هγϯϓϧόʔδϣϯʴϗοτϦϩʔσΟϯάɺϦϯλɺς ετ • ScaffoldingςϯϓϨʔτ͸ϢʔβʔʹΑΔΧελϚΠζ΋Մೳ
  5. 40.

    vuex • vuexͷAPI΋γϯϓϧ • Vuex.StoreίϯετϥΫλ
 state, mutations, actions, middlewares, strict

    • Vuex.StoreΦϒδΣΫτϓϩύςΟ
 - state
 - actions • Vuex.StoreΦϒδΣΫτϝιου
 - dispatch
 - hotUpdate