Download to read offline
More Related Content
Similar to Getting started with Vue.js - CodeMash 2020
![UiPath Automation Suite Installation (Hands-On) [2/3]](https://cdn.slidesharecdn.com/ss_thumbnails/automationsuitecommunitysession2-251015095633-a6d862f1-thumbnail.jpg?width=600ounds&width=560&fit=bounds)
Getting started with Vue.js - CodeMash 2020
- 1. Up and RunningQuickly With Burton Smith burton@breakstuff.io @stuffbreaker https://github.com/break-stuff/i-love-the-office
- 2. A Bit AboutMe…
- 3. A Bit MoreAbout Me…
- 4.
- 5. How the worldwas…
- 6.
- 7.
- 8. So what areour options…? VSVS
- 9. How do youchoose? Highly Flexible Highly Opinionated
- 10.
- 11. Why Not Vue.js? •Not as popular • Other frameworks are backed by big companies • Vue-specific code (directives, etc.) • Lack of native/mobile app support
- 12. So why chooseVue.js?
- 13. It’s Crazy fast! •Utilizes the virtual DOM • Its Reactive • Templating syntax • It’s tiny! <20KB (v3 is <10KB) • Vue v3 is even faster than Svelte!!!
- 14. Progressive Framework An incrementallyadoptable ecosystem that scales between a library and a full-featured framework.
- 15.
- 16. Component-Driven Architecture • Cleanmarkup • UI Consistency • Code reuse
- 17. Very Small LearningCurve • Intuitive Framework • Great Documentation • An Amazing Community
- 18.
- 19.
- 20.
- 21. Some References toGet You Started • Vue.js Tutorials • https://vuejs.org/ • https://vuejsdevelopers.com/ • https://alligator.io/vuejs/ • Scotch.io tutorials • http://blog.rangle.io/tag/vue/ • Free video tutorials by Maximilian Schwarzmüller
- 22. If in need… Search“AWESOME VUE” https://github.com/vuejs/awesome-vue
- 23.
- 24. My Actual Goal… Getyou up and running with Vue.js TODAY!
- 25. What we willnot be covering… • Vue.js v3 – Specifically Composition API • Vuex (kind of)
- 26.
- 27. Let’s Get Started!!! •Download https://github.com/break-stuff/i-love-the-office/ • Once you have it downloaded, open a command prompt at the root of the project and run npm install to install the project dependencies • To run the project run npm run serve • https://codesandbox.io/s/github/break-stuff/i-love-the-office/ • (Not Currently Working)
- 28. Dev Tools (optional) •For VS Code – Vetur • Install the browser extension (for Chrome and Firefox)
- 29. Getting Started • Thereare 2-and-a-half-ish ways to get started with Vue.js
- 30. Do a sweetdemo…
- 31.
- 32. Challenge 1 • Pullin the quote data and render it on the page.
- 33.
- 34.
- 35. Challenge 2 • Togglethe isFavorite property on the quote object and change the button style based on its value.
- 36.
- 37.
- 38.
- 39. Challenge 3 • Adddrop-down to filter quotes by character. If no user is selected, show all quotes.
- 40. Challenge 4 • Creatingyour first component
- 41.
- 42. Component Registration -Globally
- 43. Component Registration -Locally
- 44.
- 45.
- 46. Challenge 5 • MoveQuote-specific logic and markup to its own component
- 47.
- 48. Challenge 6 • Fixbroken like functionality
- 49.
- 50. Challenge 7 • Forminput bindings • Event Emitting
- 51. Challenge 8 • Addnew Pages and Routing
- 52.
- 53.
- 54.
- 55.
- 56. Vuex • What isVuex? Page A 1 2 3 Page B 1 2 3 Page C 1 2 3
- 57. Vuex Page A PageB Page C Vuex Data 1 Data 2 Data 3
- 58. How Does itWork?
- 59. Should You useVuex?
- 60.
- 61. Thank You!!! Go forthand code!