Learning Vue.js is worth starting with the fact that it is a popular JavaScript framework for creating user interfaces. The Vue kernel includes a kernel library, a router and Vuex, and the framework itself is suitable for gradual implementation, unlike monolithic analogues.
Assembly
The npm and Yarn package managers will make your life easier by calculating a set of operations for each package and launching the package installer with the necessary parameters.
As for the Webpack, many find it complex. This is true, but without it a number of Vue functions, such as single-file components, will not be available. For a better understanding, we suggest you read our article on learning Webpack from scratch.
Stylization
This is the basis needed by any frontender. Deepen your knowledge by studying Sass / SCSS and PostCSS preprocessors, the Tailwind framework, and single-file components.
Condition management
You need to understand the state of the components in Vue, as well as the Vuex state control pattern.
Type check
Suppose the application grows, and the risk of getting bugs related to type checking, too. In some cases, you should use TypeScript to correctly type checks throughout the application, and in some cases, PropTypes. How does it work? You can list input parameters using an object in which the property and value contain information about the type of a particular parameter and its name. For example:
props: {
title: String,
likes: Number,
isPublished: Boolean,
commentIds: Array,
author: Object,
callback: Function,
contactsPromise: Promise // or any other constructor
}
Learn more about input validation.
API
As for working with the API, everything is standard here:
GraphQL
Apollo
Relay
REST
Fetch
Axios
SuperAgentRouting
Vue Router is the official routing library of the framework. Its advantages include a modular configuration of the router, convenient navigation control, customizable page scrolling, animation of view transitions and much more. The point is that Vue Router adds the current route to each component – just specify this. $ Route inside the required component.
Utility libraries
The OpenGL Utility Library (GLU) is a computer graphics library for OpenGL. In fact, there are many more options to explore here than the Vue.js study roadmap. Among them:
Lodash
Day.js
Ramda
Numeral
RxJS