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

vue build

kazupon
February 17, 2017

vue build

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