others-Learn vue.js with me tutorial 1 - introduction to vue.js learning

1. Purpose

Start from this post, I would write posts of the process of learning vue.js, which is the leading javascript framework for modern web applications. I would write a series of posts about my learning process, and I would try to use vue.js in production to solve some real problem in my part-time job.

image-20210325220721938

2. Why I want to learn vue.js

2.1 What is vue.js

Vue.js is an open-source model–view–viewmodel front end JavaScript framework for building user interfaces and single-page applications. It was created by Evan You, and is maintained by him and the rest of the active core team members.

  • Two major characteristics of vue: reative programming and componet system.
  • Advantages of vue:
    • lightweight framework, easy to learn, two-way data binding, componentization, separation of data and structure, virtual DOM, fast running speed.
    • Vue is a single-page application, which makes the page partially refresh, without having to request all data and dom every time the page jumps, which greatly accelerates the access speed and improves the user experience.

2.2 vue.js vs react

image-20210325221228702

From this article:

One of the biggest differences between Vue and React is the way the view layer is built. By default, Vue uses HTML templates, but there’s an option to write in JSX. In React, on the other hand, there’s solely JSX. … React’s JavaScript Expressions (JSX) combine HTML and CSS together into JavaScript.

2.3 vue.js vs angular

From this article:

Vue provides higher customizability and hence is easier to learn than Angular or React. Further, Vue has an overlap with Angular and React with respect to their functionality like the use of components. Hence, the transition to Vue from either of the two is an easy option

2.4 My opinion

I want to choose the framework that is easy to learn, and I can use it to solve my problem quickly, so I choose vue.js.

3. vue.js Learning resources and guide

3.1 Books of vue.js

I am reading this book: vue.js in action by Erik Hanchett with Benjamin Listwon, this book is appropriate for beginners like me, who only grasp basics of the javascript/css/html, and want to use vue.js in real project quickly.

image-20210325221818237

You can get more books about vue.js from this list.

3.2 Guide for beginners of vue.js

Here is a guide for beginners who want to learn vue.js:

  1. You should hav Solid JavaScript / HTML / CSS basic skills. This is a precondition.

  2. You should read through the basics of the official guide. Don’t use any build tools, just use the simplest

  3. According to the examples on the official website, think of some similar examples yourself, imitate the implementation to practice your hands, and deepen your understanding.

  4. Read the first half of the advanced part of the official tutorial until the “Custom Directive”. Focus on understanding Vue’s reactive mechanism and component life cycle. “Render Function” can be skipped if it is difficult to understand.

  5. Read the chapters on routing and state management in the tutorial, and then learn vue-router and vuex as needed. Similarly, don’t worry about the build tool, just follow the examples in the document to understand the usage.

  6. After completing the basic documentation, if you are not familiar with Node-based front-end engineering, you need to make up a lesson. The following is strictly not the content of Vue itself, nor does it cover all front-end engineering knowledge, but it is a prerequisite for large-scale Vue projects, and it is also the knowledge that a qualified “front-end engineer” should have.

And if you have passed the above process, then you should:

  1. Understand the specifications behind JavaScript, the history of ECMAScript and the current way of making specifications. Learn the new features of ES2015/16, understand ES2015 modules, and pay proper attention to proposals that have not yet become standards.
  2. Learn how to use the command line. It is recommended to use a Mac.
  3. Learn the basics of Node.js. It is recommended to use tools such as nvm to manage the Node version on the machine, and to configure the npm registry as Taobao’s mirror source. At least understand the common commands of npm, how to use npm scripts, semantic version number rules, CommonJS module specifications (understand the similarities and differences between it and ES2015 Modules), Node package parsing rules, and Node’s common APIs. You should be able to write some basic command line programs yourself. Note that the latest version of Node (6+) already supports most of the features of ES2015, which can be used to consolidate ES2015.
  4. Learn how to use/configure Babel to compile ES2015 to ES5 for browser environment.
  5. Learn Webpack. Webpack is an extremely powerful and complex tool. As a starting point, understand its “everything is a module” idea, and have a basic understanding of its common configuration options and loader concepts/use methods, such as how to use Babel with Webpack. One of the challenges of learning Webpack is the confusion of its own documentation. It is recommended to search more, and there should still be good quality third-party tutorials. It is recommended to read the documentation of Webpack 2.0 if English is good. It is a great improvement over 1.0, but you need to pay attention to the incompatibility with 1.0.

3. Summary

In this post, I started learning vue.js, I showed why I choose vue.js instead of angular.js or react.js, and I also show the guide for beginners who want to learn vue.js. Thanks for your reading. Regards.

Appendix

Index of vue.js tutorials for beginners: