Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

SPA Flask Vue

261 Aufrufe

Veröffentlicht am

A Single Page Application with Flask and Vue.
Slides to Talk "Pain Free Web Development" of PyConWeb 2018 in Munich

Veröffentlicht in: Software
  • Als Erste(r) kommentieren

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 🙏

×