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

「とっつきやすい」フレームワーク Vue.js #jsfes

「とっつきやすい」フレームワーク Vue.js #jsfes

秋のJavaScript 2016で登壇したスライドです

potato4d(Takuma HANATANI)

October 15, 2016
Tweet

More Decks by potato4d(Takuma HANATANI)

Other Decks in Programming

Transcript

  1. No

  2. جຊ͕ͻͱͱ͓Γ෼͔Δ৔߹ $ npm install -D vue webpack vue-loader etc… const

    Vue = require(“vue”); const App = require(“./app.vue”); Vue.component(“comp-a”, require(“./components/comp-a.vue”); Vue.component(“comp-b”, require(“./components/comp-b.vue”); new Vue(App); On the terminal index.js
  3. VueRouter(with 1.x) router.map({ "/": { component: require(“./pages/index.vue”) }, “users/“ :{

    component: require(“./pages/users/index.vue”) }, “/users/:id”: { component: require(“./pages/users/detail.vue”) } });
  4. Server-Side Rendering(with 2.0) const Vue = require('vue'); const app =

    new Vue({ render: function (h) { return h('p', 'hello world'); }; }); const renderer = require('vue-server-renderer').createRenderer(); renderer.renderToString(app, (error, html) => { if (error) throw error; console.log(html); }); http://vuejs.org/guide/ssr.html