SpringBoot actual e-business project mall (30K + STAR) address: github.com/macrozheng/…

Abstract

First, why do I use the example of learning Vue to talk about my learning method? In fact, many of my friends follow me from my Github, and most of them are Java back-end developers. As a front-end technology, not many people have mastered Vue. So using Vue from scratch learning process as an example, for everyone to learn new technology has a good reference value, next let’s talk about my learning method!

Clear goals

When we are learning a new technology, we must have a goal, and learning with a goal is not a blind alley. For example, what is my goal to learn Vue, in fact, is to do a back-end management system front-end interface, is long below such!

There are many front-end technologies. The most popular are Vue, React and Angular. But why did I choose Vue? I studied React first, but I didn’t choose it after looking at the syntax (I’ve learned a little JavaScript before). Angular studied the whole thing, and TypeScript was still a bit hard to get used to. Ultimately, Vue was chosen.

There are three main reasons for choosing Vue:

  • First, Vue is on GithubMost StarSince it can be ranked first, it always has its advantages;
  • The second is what it advocatesProgressive learningThe transition from JavaScript to Vue is smooth without a steep learning curve;
  • And then there’s itsThe Chinese documentation is very completeIs good for our study.

Based on learning

Now that we’ve chosen the technology we need to learn, it’s time to learn the basics of Vue. I strongly recommend reading the official tutorial. When I learn a new technology, I usually read the official document in Chinese.

Official document address: cn.vuejs.org/v2/guide/

To get started, just look at the tutorial:

Tell me some thoughts when I read the document, the core is to understand the main, difficult to understand the content can be temporarily skipped. There’s no need to hit something that’s hard to understand. You might hit something that you won’t need in the future. It’s important to have a quick look at the documentation to expand your knowledge of the new technology. The more you know about a new technology, the better you’ll be able to use it.

Project oriented

Once you have a good understanding of Vue, you can find an open source project that is closest to your goal and use the technology stack used in open source projects to accomplish your goal quickly.

How do I find this item? Go to Github to find it directly, directly search the keyword Vue, according to the number of Star ranking!

So we found vue-element-admin, an open source project: github.com/PanJiaChen/…

Panjiachen.github. IO /vue-element… panjiachen.github.

The project was in line with our goals, but it seemed too complicated. We had just finished learning the basics of Vue, and learning it was almost like dissuasion. Panjiachen.geitee. IO /vue-element…

There is also a basic template project called vue-admin-template: github.com/PanJiaChen/…

After looking at its preview page and seeing how much simpler this one is, I decided to go with it.

Expand your knowledge

Once we find the target project, we’ll start learning it. Learning open source projects, we temporarily do not have to look at its source, to learn its technology stack. Once you know the technology, it’s easy to learn!

Normally, open source projects use techniques that are explained in README, but this one doesn’t. For a Vue project, we can get an idea of its technology stack by looking at its package.json file.

 {
  "dependencies": {
    "axios": "0.18.1"."element-ui": "2.13.0"."js-cookie": "2.2.0"."normalize.css": "7.0.0"."nprogress": "0.2.0"."path-to-regexp": "2.4.0"."vue": "2.6.10"."vue-router": "3.0.6"."vuex": "3.1.0"}}Copy the code

What we need to do next is to learn all the technologies in the technology stack, or to understand, to expand our knowledge.

axios

A javascript-based HTTP request client for making requests in a browser, just take a look at the project’s README to get a sense of how to use it.

github.com/axios/axios

element-ui

Vue 2.0 – a desktop component library for developers, designers and product managers. To put it bluntly, it is a UI component library. Check out the official documentation.

element.eleme.cn/

js-cookie

A JavaScript component library that operates on cookies. This can be seen in the README of your project.

Github.com/js-cookie/j…

normalize.css

A CSS library that provides a high degree of consistency across browsers on the default HTML element styles.

Github.com/necolas/nor…

nprogress

A progress bar based on JavaScript UI component, this just look at the project README about how to use.

Github.com/rstacruz/np…

path-to-regexp

A library of tools to convert path strings (such as /user/:name) into regular expressions.

Github.com/pillarjs/pa…

vue

We learned the basics of Vue before, just check out the official tutorial.

cn.vuejs.org/v2/guide/

vue-router

Vue Router is the official route manager of vue.js. Its deep integration with vue.js core makes building single-page applications a breeze. Check out the official tutorial.

router.vuejs.org/zh/

vuex

Vuex is a state management mode developed specifically for vue.js applications. It’s basically a global state manager, like user login information, which you’ll use on a lot of your pages. Just take a look at the official documentation.

vuex.vuejs.org/zh/

vue-admin-template

With these frameworks in place, we are now ready to work on our target project. There is a tutorial article in the README in Chinese.

Github.com/PanJiaChen/…

Learned the target project of the whole stack of technology, at the same time read its supporting tutorial articles, understand the source should not be difficult, the next is to see the project source code.

practice

We can divide the time like this: 1 day to read the official Vue documentation, 2 days to learn all the stacks used by vue-admin-template, 2 days to learn the source code of vue-admin-template, and 5 days to learn Vue.

Once you have learned the basics of Vue, you need to practice it if you have a firm grasp of it, otherwise it will leave you in a few days.

How to do that in practice? Going back to our learning goal: to be a front-end interface for a back-end management system, this is a good practice. I did this by working on my Mall-Admin-Web project.

My Mall project has a perfect background management API, as long as we compare my front-end project to achieve some functions is a good practice, you can master Vue.

Here I recommend you to realize my goods and order module, these two modules are the most complex, as long as these two modules can be realized, the other can be realized, using Vue to develop a set of background management system is not a problem.

conclusion

Finally, summarize my learning methods. First of all, I should make clear my learning objectives, and then study the basis of relevant technologies according to the objectives. Then I can find a relevant open source project to learn the technology stack, and then practice, so that I can have a good grasp of this technology.

The project address

Github.com/macrozheng/…

The public,

Mall project full set of learning tutorials serialized, attention to the public number the first time access.