├── .gitignore ├── README.md ├── images └── vue-developer-roadmap.png └── src └── vue-developer-roadmap-v1.xmind /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | ._* 3 | Thumbs.db 4 | *.sublime-project 5 | *.sublime-workspace 6 | .idea 7 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Vue Developer Roadmap 2 | 3 | > Roadmap to becoming a Vue Developer in 2024: 4 | 5 | Below you can find a chart demonstrating the paths that you can take and the libraries that you would want to learn to become a Vue developer. I made this chart as a tip for everyone who asks me, "What should I learn next as a Vue developer?" 6 | 7 | ## Disclaimer 8 | 9 | > The purpose of this roadmap is to give you an idea about the landscape. The road map will guide you if you are confused about what to learn next, rather than encouraging you to pick what is hip and trendy. You should grow some understanding of why one tool would be better suited for some cases than the other and remember hip and trendy does not always mean best suited for the job 10 | 11 | ## Give a Star! :star: 12 | 13 | If you like or are using this project to learn or start your solution, please give it a star. Thanks! 14 | 15 | ## Roadmap 16 | 17 | ![Roadmap](./images/vue-developer-roadmap.png) 18 | 19 | ## Resources 20 | 21 | 1. IDEs 22 | 23 | - [visualstudio](https://visualstudio.microsoft.com/downloads/) 24 | - [visualstudioCode](https://code.visualstudio.com/Download) 25 | 26 | 2. HTML 27 | 28 | - [w3schools](https://www.w3schools.com/html/) HTML Tutorial 29 | - [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/HTML) HTML: HyperText Markup Language 30 | 31 | 3. CSS 32 | 33 | - [w3schools](https://www.w3schools.com/css/) CSS Tutorial 34 | - [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/CSS) CSS: Cascading Style Sheets 35 | - [fontawesome](https://fontawesome.com/) Official website 36 | - [w3schools](https://www.w3schools.com/icons/icons_reference.asp) Icons Reference 37 | 38 | 4. JavaScript 39 | 40 | _Basic_ 41 | 42 | - [w3schools](https://www.w3schools.com/js/default.asp) JavaScript Tutorial 43 | - [developer.mozilla](https://developer.mozilla.org/en-US/docs/Web/JavaScript) JavaScript 44 | - [javascript.info](https://javascript.info/) The Modern JavaScript Tutorial 45 | - [htmlcheatsheet](https://htmlcheatsheet.com/js/) JS CheatSheet 46 | 47 | _es6_ 48 | 49 | - [exploringjs](https://exploringjs.com/es6/index.html) Exploring ES6 50 | - [es6-features](http://es6-features.org/#Constants) ECMAScript 6 — New Features: Overview & Comparison 51 | - [jsfeatures](https://jsfeatures.in) jsfeatures 52 | - [babeljs](https://babeljs.io/docs/en/learn) Learn ES2015 53 | - [github](https://github.com/lukehoban/es6features) ECMAScript 6 54 | - [github](https://github.com/sudheerj/ECMAScript-features) ECMAScript 6 55 | 56 | _Style Guide_ 57 | 58 | - [github](https://github.com/airbnb/javascript) Airbnb JavaScript Style Guide 59 | - [github](https://github.com/ryanmcdermott/clean-code-javascript) clean-code-javascript 60 | 61 | _playground_ 62 | 63 | - [js-array-playground](https://js-array-playground.firebaseapp.com/) JavaScript Array Playground 64 | - [jsfiddle](https://jsfiddle.net/) 65 | - [plnkr](https://plnkr.co/) 66 | - [jsbin](https://jsbin.com/?html,output) 67 | - [codepen](https://codepen.io/pen/) 68 | - [stackblitz](https://stackblitz.com/) 69 | 70 | 5. Vue 71 | 72 | - [official website](https://vuejs.org/) 73 | - [View forms](https://vuejs.org/v2/guide/forms.html) 74 | - [View components](https://vuejs.org/v2/guide/components.html) 75 | 76 | 6. Routing 77 | 78 | - [Vue Router](https://router.vuejs.org/) 79 | - [Router5](https://router5.js.org/) 80 | 81 | 7. Type Checkers 82 | 83 | - [TypeScript](https://www.typescriptlang.org/) 84 | - [TypeScript](https://vuejs.org/v2/guide/typescript.html) 85 | - [Flow](https://flow.org/en/) 86 | 87 | 8. Build Tools 88 | 89 | - Package Managers 90 | - [npm](https://www.npmjs.com/) 91 | - [yarn](https://yarnpkg.com/lang/en/) 92 | - [pnpm](https://pnpm.js.org/) 93 | - Module Bundlers 94 | - [vue-cli](https://cli.vuejs.org/) 95 | - [Webpack](https://webpack.js.org/) 96 | - [Bazel](https://bazel.build/) 97 | - [Rollup](https://rollupjs.org/guide/en) 98 | - [Browserify](http://browserify.org/) 99 | - [FuseBox](https://fuse-box.org/) 100 | - Task Runners 101 | - [npm scripts](https://docs.npmjs.com/misc/scripts) 102 | - [gulp](https://gulpjs.com/) 103 | - [grunt](https://gruntjs.com/) 104 | 105 | 9. UI Design 106 | 107 | - CSS Preprocessor 108 | - [Sass/CSS](https://sass-lang.com/) 109 | - [PostCSS](https://postcss.org/) 110 | - [Less](http://lesscss.org/) 111 | - [Stylus](http://stylus-lang.com/) 112 | - CSS Frameworks 113 | - [Bootstrap](https://getbootstrap.com/) 114 | - [Materialize](https://materializecss.com/) 115 | - [Bulma](https://bulma.io/) 116 | - [Semantic UI](https://semantic-ui.com/) 117 | - CSS in JS 118 | - [Styled Components](https://www.styled-components.com/) 119 | - [Radium](https://formidable.com/open-source/radium/) 120 | - [Emotion](https://emotion.sh/) 121 | - [JSS](http://cssinjs.org/) 122 | - [Aphrodite](https://github.com/Khan/aphrodite) 123 | - Component libraries 124 | - [Quasar](https://quasar-framework.org/) 125 | - [Vuetify](https://vuetifyjs.com/en/) 126 | - [iView](https://www.iviewui.com/) 127 | - [Vuesax](https://lusaxweb.github.io/vuesax/) 128 | - [bootstrap-vue](https://bootstrap-vue.js.org/) 129 | 130 | 10. State Management 131 | 132 | - [Component state](https://vuejs.org/v2/guide/state-management.html) 133 | - [Vuex](https://vuex.vuejs.org/) 134 | - Data persistence 135 | - [vue-persistedstate](https://github.com/robinvdvleuten/vuex-persistedstate) 136 | 137 | 11. API Clients 138 | 139 | - REST 140 | - [Fetch](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) 141 | - [SuperAgent](https://visionmedia.github.io/superagent/) 142 | - [axios](https://github.com/axios/axios) 143 | - GraphQL 144 | - [Apollo](https://apollo.vuejs.org/) 145 | - [Relay](https://facebook.github.io/relay/) 146 | - [urql](https://github.com/FormidableLabs/urql) 147 | 148 | 12. Utility Libraries 149 | 150 | - [Lodash](https://lodash.com/) 151 | - [Moment](https://momentjs.com/) 152 | - [classnames](https://github.com/JedWatson/classnames) 153 | - [Numeral](http://numeraljs.com/) 154 | - [RxJS](http://reactivex.io/) 155 | - [ImmutableJS](https://facebook.github.io/immutable-js/) 156 | - [Ramda](https://ramdajs.com/) 157 | 158 | 13. Coding style 159 | 160 | - [TSLint](https://palantir.github.io/tslint/) 161 | - [Prettier](https://prettier.io/) 162 | 163 | 14. Testing 164 | 165 | - Unit Testing 166 | - [Jest](https://facebook.github.io/jest/) 167 | - [vue-test-utils](https://github.com/vuejs/vue-test-utils/) 168 | - [Sinon](http://sinonjs.org/) 169 | - [Mocha](https://mochajs.org/) 170 | - [Chai](http://www.chaijs.com/) 171 | - [AVA](https://github.com/avajs/ava) 172 | - [Tape](https://github.com/substack/tape) 173 | - End to End Testing 174 | - [Nightwatch](http://nightwatchjs.org/) 175 | - [Selenium](https://www.seleniumhq.org/) 176 | - [Webdriver](http://webdriver.io/) 177 | - [Puppeteer](https://pptr.dev/) 178 | - [Cucumber.js](https://github.com/cucumber/cucumber-js) 179 | - Integration Testing 180 | - [Karma](https://karma-runner.github.io/) 181 | 182 | 15. Internationalization 183 | 184 | - [vue-i18n](https://kazupon.github.io/vue-i18n/) 185 | 186 | 16. Server Side Rendering 187 | 188 | - [Nuxt](https://nuxtjs.org/) 189 | 190 | 17. Static Site Generator 191 | 192 | - [VuePress](https://vuepress.vuejs.org/) 193 | 194 | 18. Progressive Web Apps 195 | 196 | - [Quasar](https://quasar-framework.org/) 197 | 198 | 19. Mobile Application Development 199 | 200 | - [Quasar](https://quasar-framework.org/) 201 | - [Vue Native](https://github.com/GeekyAnts/vue-native-core/) 202 | - [Nativescript Vue](https://nativescript-vue.org/) 203 | - [Weex](https://weex.incubator.apache.org/) 204 | 205 | 20. Desktop Application Development 206 | 207 | - [Quasar](https://quasar-framework.org/) 208 | - [Electron](https://electronjs.org/) 209 | - [NW.js](https://nwjs.io/) 210 | - [Vuido](https://vuido.mimec.org/) 211 | 212 | ## Contribution 213 | 214 | If you want to contribute to this project to make it more helpful for other Vue developers, your help is very welcome! 215 | 216 | Just file an issue, better yet: submit a PR! 🙂 217 | -------------------------------------------------------------------------------- /images/vue-developer-roadmap.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/saifaustcse/vue-developer-roadmap/d7402022e55ed62297a3c78650b8fbe90f452870/images/vue-developer-roadmap.png -------------------------------------------------------------------------------- /src/vue-developer-roadmap-v1.xmind: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/saifaustcse/vue-developer-roadmap/d7402022e55ed62297a3c78650b8fbe90f452870/src/vue-developer-roadmap-v1.xmind --------------------------------------------------------------------------------