Upgrade to PRO for Only $50/Year—Limited-Time Offer! 🔥

Vue.js on Rails / vue-js-on-rails

Hiromi Kimura
August 28, 2017
4.7k

Vue.js on Rails / vue-js-on-rails

Hiromi Kimura

August 28, 2017
Tweet

More Decks by Hiromi Kimura

Transcript

  1. PO

  2. XFCQBDL CBCFM QBDLBHFKTPO { "private": true, "scripts": { "webpack": "webpack"

    }, "dependencies": {}, "devDependencies": { "babel-core": "^6.26.0", "babel-loader": "^7.1.2", "babel-preset-es2015": "^6.24.1", "webpack": "^3.5.5" }, "babel": { "presets": ["es2015"] } } w+BWB4DSJQUͷϏϧυπʔϧ wZBSOSVOXFCQBDL wCBCFMͰ&4 &4 ରԠ wઃఆ͸XFCQBDLDPOpHKT
  3. σΟϨΫτϦߏ੒ྫ ᵓBQQ ᴹᵋBTTFUT ᴹᵋKBWBTDSJQUT ᴹᵋBQQMJDBUJPOKT ᵓGSPOUFOE ᴹᵓTSD ᴹᴹᵋFOUSZKT ᴹᵓUFTU ᴹᵋXFCQBDLDPOpHKT

    ᵓQVCMJD ᴹᵋBTTFUT ᵓʜ ᵓQBDLBHFKTPO ᵋZBSOMPDL wGSPOUFOEʹ·ͱΊΔ w+4։ൃ࣌͸3BJMTXBZΛҙࣝ͠ͳ͍
 ˠ3BJMTͱ+4։ൃΛૄʹͰ͖Δ
  4. σΟϨΫτϦߏ੒ ࠶ܝ ᵓBQQ ᴹᵋBTTFUT ᴹᵋKBWBTDSJQUT ᴹᵋBQQMJDBUJPOKT ᵓGSPOUFOE ᴹᵓTSD ᴹᴹᵋFOUSZKT ᴹᵓUFTU

    ᴹᵋXFCQBDLDPOpHKT ᵓQVCMJD ᴹᵋBTTFUT ᵓʜ ᵓQBDLBHFKTPO ᵋZBSOMPDL wGSPOUFOEʹ·ͱΊΔ w։ൃ࣌͸3BJMTXBZΛҙࣝ͠ͳ͍
 ˠ3BJMTͱ+4։ൃΛૄʹͰ͖Δ
  5. XFCQBDLϏϧυ ᵓBQQ ᴹᵋBTTFUT ᴹᵋKBWBTDSJQUT ᴹᵋBQQMJDBUJPOKT ᴹᵋCVOEMFKT ᵓGSPOUFOE ᴹᵓTSD ᴹᴹᵋFOUSZKT ᴹᵓUFTU

    ᴹᵋXFCQBDLDPOpHKT ᵓQVCMJD ᴹᵋBTTFUT ᵓʜ ᵓQBDLBHFKTPO ᵋZBSOMPDL wϏϧυͯ͠Ξηοτର৅σΟϨΫτϦ ʹग़ྗ CVOEMFKT  wCVOEMFKT͸HJUJHOPSF w։ൃ࣌͸GPSFNBO࢖ͬͯ
 SBJMTTFSWFSͱXFCQBDLXBUDIΛ
 ಉ࣌ʹىಈ
  6. 4QSPDLFUTʢBTTFUTQSFDPNQJMFʣ ᵓBQQ ᴹᵋBTTFUT ᴹᵋKBWBTDSJQUT ᴹᵋBQQMJDBUJPOKT ᴹᵋCVOEMFKT ᵓGSPOUFOE ᴹᵓTSD ᴹᴹᵋFOUSZKT ᴹᵓUFTU

    ᴹᵋXFCQBDLDPOpHKT ᵓQVCMJD ᴹᵋBTTFUT ᴹᵋBQQMJDBUJPOFGCGEBCGKT ᵓʜ ᵓQBDLBHFKTPO ᵋZBSOMPDL wCVOEMFKTͷ಺༰ؚ͕·Εͨঢ়ଶͰ QVCMJDBTTFUTʹग़ྗ wpOHFUQSJOU͕ͭ͘
  7. "7" wIUUQTHJUIVCDPNBWBKTBWB ⭐PWFS  w,BSNB KBTNJOF΋ࢼ͕ͨ͠"7"ͷ΄͏͕ઃఆ͕γϯϓϧ wฒྻͰςετͳͷͰૣ͍ w7VFΠϯελϯεͷςετՄೳ w$PNQPOFOU WVF

    Λ࢖͏ͷͰ͋Ε͹"WPSJB[͕ศརͦ͏
 7VFίϯϙʔωϯτͷϢχοτςετ
 IUUQTTQFBLFSEFDLDPNIZQFSNLUWVFLPOQPOFOUPGBMTFZVOJUVUPUFTVUP
  8. ࣮૷ྫ GSPOUFOETSDFOUSZKT import Vue from 'vue'; export default new Vue({

    el: '#vue-hello', data: { message: 'hello' }, methods: { shout: function () { this.message = 'hello!!!!!!!!!!'; } } });
  9. ୯ମςετྫ GSPOUFOETSDFOUSZKT GSPOUFOEUFTUFOUSZUFTUKT import test from 'ava'; import entry from

    '../src/entry'; test('entry vue instance', t => { t.is(typeof entry, 'object'); t.is(entry.$data.message, 'hello'); }); test('entry#shout', t => { entry.shout(); t.is(entry.$data.message, 'hello!!!!!!!!!!'); });