Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Nuxt로 사내서비스 구현하면서 얻은 경험 공유

3,756 views

Published on

Vue.js Meetup Korea : Vue-tiful Korea 발표자료입니다

Published in: Software
  • Be the first to comment

Nuxt로 사내서비스 구현하면서 얻은 경험 공유

  1. 1. = ::
  2. 2. – Evan You “Integrating with Nuxt is the full package. It’s like more complete.”
  3. 3. Web Development Nowadays • Component, Container, Store • SSR (Server-Side Rendering) • Router w/ History API • Latest ECMAScript • Hot Module Reloading • SASS • ...
  4. 4. No more… • webpack.config.js • gulpfile.js • .babelrc • ...
  5. 5. No more… • webpack.config.js • gulpfile.js • .babelrc • ...
  6. 6. Only Nuxt $ npm install nuxt
  7. 7. Only Nuxt $ npm install nuxt
  8. 8. Only Nuxt $ npm install nuxt
  9. 9. Isomorphic JavaScript Isomorphic JavaScript Code
  10. 10. Isomorphic JavaScript Isomorphic JavaScript Code Front-end Script
  11. 11. Isomorphic JavaScript Isomorphic JavaScript Code Web ServerFront-end Script
  12. 12. Vue as Template Engine • <% %> • <%= %> • <%# %> • <% -%> • {% extends %} • {% if %} • {% elif %} • {% for in %}
  13. 13. Vue as Template Engine • <% %> • <%= %> • <%# %> • <% -%> index.vue • {% extends %} • {% if %} • {% elif %} • {% for in %}
  14. 14. Caveat
  15. 15. Different Context • window • document • $ • localStorage • ... • process • global • module • require(‘path’) • ...
  16. 16. Tree Shaking import _ from ‘lodash’
  17. 17. Tree Shaking import _ from ‘lodash’ 540 KB
  18. 18. Tree Shaking import _ from ‘lodash’ 540 KB import _map from ‘lodash/map’
  19. 19. Tree Shaking import _ from ‘lodash’ 540 KB import _map from ‘lodash/map’ 2 KB
  20. 20. Demonstration

×