Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Vue.jsによるWebアプリケーション開発

hypermkt
December 10, 2016

 Vue.jsによるWebアプリケーション開発

Vue.jsによるWebアプリケーション開発
バーチー / GMO PEPABO inc.
2016.12.10 YAPC::Hokkaido
Sample Code: https://github.com/hypermkt/nippo

hypermkt

December 10, 2016
Tweet

More Decks by hypermkt

Other Decks in Programming

Transcript

  1. ϑΝΠϧɾσΟϨΫτϦߏ੒ w QVCMJDJOEFYIUNMɾɾɾτοϓϖʔδͱͳΔςϯϓϨʔτ w TSDKTNBJOKTɾɾɾϧʔςΟϯά w TSDKTDPNQPOFOTɾɾɾ7VFKTDPNQPOFOUϑΝΠϧஔ͖৔ w BQQWVFɾɾɾτοϓϖʔδ೔ใҰཡ w

    OJQQPOFXWVFɾɾɾ೔ใ౤ߘ w OJQQPFEJUWVFɾɾɾ೔ใฤूɾ࡟আ w TSDKTNJYJOTɾɾɾNJYJOTσΟϨΫτϦ w BQJɾɾɾ-VNFOʹΑΔ"1*ΞϓϦέʔγϣϯ
  2. BMJBTJGZͰSFRVJSF࣌ʹελϯυΞϩϯ൛Λ࢖༻͢ΔΑ͏ʹௐ੔ { "scripts": { "build": "browserify -e src/js/main.js -o public/app.js"

    }, "browserify": { "transform": [ "aliasify" ] }, "aliasify": { "aliases": { "vue": "vue/dist/vue.js" } }, "dependencies": { "vue": "^2.0.3" }, "devDependencies": { "aliasify": "^2.0.0" } } ͕͜͜ϙΠϯτʂ
  3. 41"

  4. BQJOJQQPFTͷϨεϙϯε [ { "id": 23, "content": "ϥʔϝϯ৯΂͍ͨʂʂ", "created_at": "2016-11-26 06:40:51",

    "updated_at": "2016-11-26 06:44:03" }, { "id": 24, "content": "͓ण࢘৯΂͍ͨʂʂ", "created_at": "2016-11-26 06:42:20", "updated_at": "2016-11-26 06:43:49" } ]
  5. ςετͷ࣮ߦ # karma start karma.conf.js
 $ npm run test >

    nippo@ test > karma start karma.conf.js 26 11 2016 17:58:52.420:INFO [framework.browserify]: bundle built 26 11 2016 17:58:52.433:INFO [karma]: Karma v1.3.0 server started at http://localhost:9876/ 26 11 2016 17:58:52.433:INFO [launcher]: Launching browser PhantomJS with unlimited concurrency 26 11 2016 17:58:52.447:INFO [launcher]: Starting browser PhantomJS 26 11 2016 17:58:53.340:INFO [PhantomJS 2.1.1 (Mac OS X 0.0.0)]: Connected on socket / #GmFgwD2k7lgyHVGsAAAA with id 76777246 Appίϯϙʔωϯτ ✓ ϝιου͕ଘࡏ͢Δ ✓ datetimeܗࣜΛ೔ຊޠදهʹม׵͢Δ LOG LOG: 'success' ✓ fetchNippoesͰ೔ใҰཡ͕औಘͰ͖Δ PhantomJS 2.1.1 (Mac OS X 0.0.0): Executed 3 of 3 SUCCESS (0.025 secs / 0.017 secs) TOTAL: 3 SUCCESS