Diese Präsentation wurde erfolgreich gemeldet.
Die SlideShare-Präsentation wird heruntergeladen. ×

SPA Flask Vue

Weitere Verwandte Inhalte

Ähnliche Bücher

Kostenlos mit einer 30-tägigen Testversion von Scribd

Alle anzeigen

Ähnliche Hörbücher

Kostenlos mit einer 30-tägigen Testversion von Scribd

Alle anzeigen

SPA Flask Vue

  1. 1. SPA with Flask & Vue | @vannsl Pain Free Frontend Development SPA with Flask and Vue
  2. 2. Vanessa Böhner Frontend Developer @vannsl @vannsl vannsl.io
  3. 3. SPA with Flask & Vue | @vannsl Codebase github.com/Vannsl/spa-flask-vue
  4. 4. SPA with Flask & Vue | @vannsl past index.html main.js styles.css
  5. 5. SPA with Flask & Vue | @vannsl now Frontend development logos
  6. 6. SPA with Flask & Vue | @vannsl SPA with Flask and Vue
  7. 7. SPA with Flask & Vue | @vannsl 😱 Another FE Framework?
  8. 8. SPA with Flask & Vue | @vannsl Progressive JS framework • Approachable • Versatile • Performant
  9. 9. SPA with Flask & Vue | @vannsl Core Features
  10. 10. SPA with Flask & Vue | @vannsl Declarative Rendering Reactive Data Binding
  11. 11. SPA with Flask & Vue | @vannsl Small & Reusable Components Composing with Components Single File Components
  12. 12. SPA with Flask & Vue | @vannsl Vue Lifecycle Hooks The Vue Instance
  13. 13. SPA with Flask & Vue | @vannsl index.html main.js styles.css App.vue
  14. 14. SPA with Flask & Vue | @vannsl And that’s why: Webpack Webpack 4
  15. 15. SPA with Flask & Vue | @vannsl The good news: You don’t have to care 🤷
  16. 16. SPA with Flask & Vue | @vannsl vue-cli • CLI für rapid Vue.js development • Scaffolding the project • Ready-to-use app skeletons
  17. 17. SPA with Flask & Vue | @vannsl vue-cli
  18. 18. SPA with Flask & Vue | @vannsl Project Structure
  19. 19. SPA with Flask & Vue | @vannsl Project Structure
  20. 20. SPA with Flask & Vue | @vannsl Sources
  21. 21. SPA with Flask & Vue | @vannsl HelloWorld.vue
  22. 22. SPA with Flask & Vue | @vannsl Sources
  23. 23. SPA with Flask & Vue | @vannsl Vue Router mode hash: localhost:8080/#/faq mode history: localhost:8080/faq
  24. 24. SPA with Flask & Vue | @vannsl Add router to App.vue
  25. 25. SPA with Flask & Vue | @vannsl Create the backend - FAQ - Endpoint…
  26. 26. SPA with Flask & Vue | @vannsl Component FAQ.vue
  27. 27. SPA with Flask & Vue | @vannsl npm run dev && FLASK_APP=run.py FLASK_DEBUG=1 flask run
  28. 28. SPA with Flask & Vue | @vannsl
  29. 29. SPA with Flask & Vue | @vannsl www.awesome-vue.com • Datepicker • Spinner • Waterfall Layout • Adsense • Electron • i18n • Google Analytics
  30. 30. SPA with Flask & Vue | @vannsl Thanks 🙏Thanks 🙏

×