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

vue build

Avatar for kazupon kazupon
February 17, 2017

vue build

Avatar for kazupon

kazupon

February 17, 2017
Tweet

More Decks by kazupon

Other Decks in Programming

Transcript

  1. The solution of Vue • vue-cli • Official templates npm

    install -g vue-cli vue-cli init webpack-simple-2.0 my-app cd my-app npm install npm run dev
  2. But, About for prototyping … • Tools management … •

    Bundler configuration … • Template customizing … “We'd like to fold that functionality into vue-cli as vue build with a sharper focus on prototyping experience.” https://github.com/vuejs/vue-cli/issues/173
  3. `vue build` • A zero-configuration development setup, install once and

    build everywhere. • Support from v2.8.0 • Webpack based implementation • built-in some loaders: file, url, css, postcss, babel … • ES2015 with babel • dev-server with express
  4. Build for production vue build index.js --prod > Creating an

    optimized production build: Hash: 56152bbe124d3f8999bc Version: webpack 2.2.1 Time: 2890ms Asset Size Chunks Chunk Names client.6832bedc.js 52.5 kB 0 [emitted] client client.6832bedc.js.map 426 kB 0 [emitted] client index.html 260 bytes [emitted] SUCCESS Compiled successfully.
  5. Build for distribution component vue build comp.js --prod --lib Comp

    > Creating an optimized production build: Hash: 578553dd919e3ba54abf Version: webpack 2.2.1 Time: 562ms Asset Size Chunks Chunk Names comp.js 922 bytes 0 [emitted] client comp.js.map 8.37 kB 0 [emitted] client SUCCESS Compiled successfully.
  6. Watch mode vue build index.js --watch
 Compiled successfully in 1793ms

    > Open http://localhost:4000 hello world !! hello vue.js !! Edit Update with Hot reloading !!
  7. Configuration vue init webpack project1 cd project1 yarn vue build

    src/main.js --prod --webpack build/webpack.prod.conf.js > Using .babelrc in current working directory > Using webpack config file at ~/path/to/project1/build/webpack.prod.conf.js > Creating an optimized production build: Hash: 39c01c24ee5fd0c92ab6 Version: webpack 2.2.1 Time: 8086ms Asset Size Chunks Chunk Names static/js/client.f8a1e4f147fedafd6460.js.map 18 kB 0, 1, 3 [emitted] client static/logo.94d14d6a.png 9.17 kB [emitted] static/js/app.7cf57349194a8d0aefc2.js 2.6 kB 1, 3 [emitted] app static/js/vendor.4c0310dd0f2fc9218a18.js 76.4 kB 2, 3 [emitted] vendor static/js/manifest.da0f37b4fda13d9d3845.js 1.52 kB 3 [emitted] manifest static/css/client.e7a9982cfb5f83ec00c5653d0d57f219.css 434 bytes 0, 1, 3 [emitted] client static/css/app.e7a9982cfb5f83ec00c5653d0d57f219.css 431 bytes 1, 3 [emitted] app static/js/client.f8a1e4f147fedafd6460.js 2.64 kB 0, 1, 3 [emitted] client static/css/client.e7a9982cfb5f83ec00c5653d0d57f219.css.map 949 bytes 0, 1, 3 [emitted] client static/js/app.7cf57349194a8d0aefc2.js.map 17.8 kB 1, 3 [emitted] app static/css/app.e7a9982cfb5f83ec00c5653d0d57f219.css.map 956 bytes 1, 3 [emitted] app static/js/vendor.4c0310dd0f2fc9218a18.js.map 608 kB 2, 3 [emitted] vendor static/js/manifest.da0f37b4fda13d9d3845.js.map 14.2 kB 3 [emitted] manifest index.html 619 bytes [emitted] SUCCESS Compiled successfully.
  8. Conclusion • `vue build` is zero-configuration building command for prototyping

    • Use custom configuration feature, you can also build the your App!!
  9. Vue.js community for Japanese • You can join via Vue.js

    official site
 http://jp.vuejs.org