Before reading the source code first to understand the source directory organization.

Generate a directory structure

You can use Treer;

npm install treer -g

treer -e ./result.txt -i .git
Copy the code

Second, the generated directory structure

D: \ shali \ work2 \ learn \ vue ├ ─ README. En. The md ├ ─ README. Md ├ ─ types | ├ ─ test ├ ─ test # test automation related ├ ─ SRC # source | ├ ─ Shared common tools code # project | | ├ ─ the js | | └ util. Js | ├ ─ SFC # single file parsing code of component | | └ parser. Js | ├ ─ server # server code | ├ ─ platforms # platform-specific code, Such as weex and web | | ├ ─ weexs | | ├ ─ web | ├ ─ core # general, has nothing to do with the platform runtime code | | ├ ─ vdom # code associated with the virtual DOM | | ├ ─ util | | ├ ─ the observer # Data hijacking relevant code | | ├ ─ instance # vue instance constructors and prototypes methods | | ├ ─ global - # API global API related, such as filter, directive | | ├ ─ components # built-in component, Such as keep alive, component, the transition and slot | ├ ─ # compiler code associated with template compilation ├ ─ scripts # webpack configuration related ├ ─ packages # webpack are packaged ├ ─ flow # flow type declaration documents ├ ─ examples # example ├ ─ dist # compiled file ├ ─ benchmarks ├ ─. Making ├ ─. Circleci | └ config. YmlCopy the code

(1) Compile

Including code related to template compilation, responsible for compiling templates into AST syntax tree, AST syntax tree optimization, code generation and other functions;

Compilation can be done either at build time (with the vue-loader plug-in) or at runtime (using the vue.runtime.js library that contains the build functionality); Since compilation is performance-intensive, it is recommended to compile at build time.

Here are the different libraries built: **

├ ─ dist | ├ ─ README. Md | ├ ─ vue.com mon. Dev. Js # complete version | ├ ─ vue.com mon. Js | ├ ─ vue.com mon. Prod. Js | ├ ─ vue. Esm. The js | ├ ─ vue. Esm. Browser. Min. Js | ├ ─ vue. Esm. Js | ├ ─ vue. Js | ├ ─ vue. Min. Js | ├ ─ vue.runtime.com mon. Dev. Js version | # contains only runtime ├ ─ vue.runtime.com mon. Js | ├ ─ vue.runtime.com mon. Prod. Js | ├ ─ vue. Runtime. Esm. Js | ├ ─ vue. Runtime. Js | └ vue. Runtime. Min. JsCopy the code

(2) Core

| ├ ─ core # general, has nothing to do with the platform runtime code | | ├ ─ vdom # code associated with the virtual DOM | | ├ ─ util | | ├ ─ the observer # data hijacking relevant code | | ├ ─ instance # Vue instance constructor and prototype method | | ├ ─global- global API related API # | | ├ ─ components # built-in components, such as keep alive, component, the transition, slot, etcCopy the code

Core is the core of Vue. The directory contains the core code of Vue. Including built-in components (such as keep-alive, Component, transition-group, transition, slot), Vue global API encapsulation (filter, directive, etc.), Vue instantiation, observer implementation, VDOM, tool functions, etc.

(3) PlateForm

| ├ ─ platforms # code associated with the platform, such as weex and web | | ├ ─ weexs | | ├ ─ webCopy the code

Vue. Js is a cross-platform MVVM framework that can run on either the Web or native clients with WEEX. Plateform is an entry point to vue.js and can be compiled into vue.js libraries on the Web and weeX, respectively

(4) Server

The main work of server rendering is to render the template into HTML code on the server side, which saves the process of converting vUE template into HTML and interface request on the browser side, and can improve the loading speed of the page.

(5) SCF

Vue-loader parses the.vue file, extracts each language block, and if necessary, processes it through other Loaders, and finally assembles them into an ES Module whose default export is an object of vue.js component options.

(6) Shared

Some utility methods that are common within vUE are shared between vue. js on the browser side and vue. js on the server side, for example

export function isPromise (val: any) :boolean {
  return (
    isDef(val) &&
    typeof val.then === 'function' &&
    typeof val.catch === 'function')}...Copy the code