1. Introduction

This article explains the content: a piece of mind mapping to help you understand the Vue | Vue – the Router | Vuex source architecture.

Project address: github.com/biaochenxuy…

An illustrated version of the article

Vue-family.md

Vue-family.pdf

2. Vue family bucket

First, a general picture of Vue bucket:

3. Vue

Segment is as follows

Source directory

Source code build, based on Rollup

Vue essence: constructor

Data driven

componentization

Deep into the responsivity principle

compile

extension

4. Vue-Router

introduction

Routing registered

VueRouter object

matcher

Path switching

5. Vuex

introduction

Vuex initialization

API

The plug-in

6. Done and to be done

Has been completed:

  • Mind mapping

Pending:

  • Continue to refine the mind map
  • Add flowchart

Because the project was done in my spare time, the author has limited ability and time, and many details have not been perfected.

If you are god, or have a better view of VUE source code, welcome to submit issue, we exchange and learn together, together to create a decent explanation of vUE family barrel source code architecture open source project.

7. To summarize

The above content is the author’s recent study of Vue source code harvest and notes, the content of this article is mostly open source project Vue. Js technology revealed content, but in the form of mind mapping to show, the content is omitted, but also added a little understanding of the author.

The reason why the author adopts the mind map to record the learned content is that the mind map can better reflect the knowledge system and structure and enable people to form a complete knowledge structure. Once the knowledge forms a system, it will be easy to understand and not easy to forget.

Note: The images in this article may be compressed when uploaded and may be a little blurry, but all the ultra HD images used in this article are already on Github, and there are also original files in PDF format, Markdown syntax, and mind map. You can export the ultra HD images from the original mind Map files.

I often more address: github

8. The last

To the good

If you find this article or project inspiring, please give it a thumbs up or a star. Thumbs up is a virtue. Thank you.

Refer to open source projects:

  1. Github.com/ustbhuangyi…
  2. Github.com/HcySunYang/…