Download and launch the Vue 3 source code

The source code for Vue 3 can be downloaded on Github. Install Git first and run the following command:

git clone https://github.com/vuejs/vue-next.git
Copy the code

After that, the source code of Vue 3 is downloaded to the VUe-next folder. Open the CMD command line tool. Because the source code of Vue 3 is built using Yarn, you need to install Yarn in advance.

npm i yarn -g
Copy the code

Then go to the vue-next directory and run the following command:

yarn --ignore-scripts
Copy the code

To enable Vue 3 source debug mode, run NPM run dev to view the vue.global.js file in vue-next\packages\ vuue \dist, which is the source file built in development mode. Source code complete directory structure, as shown in figure.

Vue 3 and the core source code are in Packages and built based on RollUp, where each directory represents the following meaning:

├ ─ ─ packages │ ├ ─ ─ core compiler compiler - core / / no (platform) │ ├ ─ ─ dom compiler compiler - dom / / │ ├ ─ ─ the compiler - SFC / / vue single file compiler │ ├ ─ ─ │ ├─ ├─ Global.d.ts // typescript Declaration files │ ├─ ReActivity // │ ├─ ├─ Run-time Dom API, ├─ Run-time DOM API, ├─ Run-time DOM API, │ ├─ Heavy Metal Exercises for Playground │ ├─ Heavy Metal Exercises for Playground │ ├─ Heavy Metal Exercises for playground │ ├─ Heavy Metal Exercises for playground │ ├─ Heavy Metal Exercises for playground │ ├─ Heavy Metal Exercises for playground │ ├─ Size check // │ ├─ template-Explorer │ ├─ vue │ ├─ vue │ ├─ vue │ ├─ vue │ ├─ vue │ ├─ vue │ ├─ vueCopy the code

The directory module

From the above source code structure, you can see the following modules are special:

  • compiler-core
  • compiler-dom
  • runtime-core
  • runtime-dom

You can see that core and DOM appear twice, so what’s the difference between compiler and Runtime?

  • The compile: We can understand for the procedure compilation, refers to our written source code in this period of time, is compiled the target file can be popular as we write good source code by the build tools into the final executable file this time, can be understood as we will be here. Vue file compilation into browser can identify. Js file some of the work.
  • Runtime: refers to the time when a program is compiled, and the browser opens the program and runs it until the program closes.

In the package directory, in addition to the four directories listed above, there is also the reactivity directory which is more important. It is the source of the responsive module. Since the whole source code of Vue 3 adopts the Monorepo specification, each sub-module below can be compiled and packaged independently, so as to provide services independently. Use require(‘@vue/reactivity’) to introduce the package.json file in the reactivity directory.

Other Directories: Compiler-sfc is a single-file component compilation tool, server-renderer directory is the source of server-side rendering module, SFC-Playground is an online Vue single-file component debugging tool, and shared directory contains the source of commonly used tool library methods. Size-check is a tool for testing code volume, template-Explorer is a development tool for debugging compiler output, and the final vue directory is the full source code generation directory for vue.js.

build

It is common to build Vue in vue.global.js or vue.runtime.global.js versions, which say:

  • Vue.global.js: is a “full” build with a compiler and runtime, so it supports dynamically compiling templates.
  • Vue.runtime.global.js: contains runtime only and requires precompilation of templates during the build step.

If you need to compile the template on the client side (that is, pass the string to the template option, or mount it to the element using the HTML in the ELEMENT’s DOM as a template), you will need a compiler, so the full build version is required, as shown in the code below:

Vue. CreateApp ({template: '< div > {{hi}} < / div >'}) / / don't need a Vue createApp ({render () {return Vue. H (' div ', {}, this. Hi)}})Copy the code

When using the vue-loader for Webpack, the templates in the *.vue file are precompiled to JavaScript at build time, and no compiler is needed in the final bundle, so you can just use the runtime build version. So, if you open the Vue page directly in a browser, you can import the full version directly with 

node scripts/dev.js -f global-runtime
Copy the code

When you need to build the runtime version, execute:

node scripts/dev.js -f global
Copy the code

The -f parameter and other parameters can be found in vue-next/rollup.config.js. The corresponding files can be found in vue-next packages vue dist. All versions of Vue 3 can be built as follows:

// global (for browser <script SRC ="" /> tag import, Import will increase after a global object of Vue) Vue. Global. Js Vue. Global. Prod. Js (production version, code compression) Vue. Runtime. Global. Js Vue. Runtime. Global. Prod. Js (production), // browser (used to support ES6 Modules browser <script type="module" SRC =""/> tag import) vue.esm-browser.js Vue.esm -browser.prod.js (production version, code compressed) vue.runtime.esm-browser.js Vue.runtime.esm -browser.prod.js (production version, Esm -bundler.js bue.runtime.esm-bundler.js -bundler.js -bundler.js -bundler.jsCopy the code

Different builds of Vue source files need to be used on different platforms and environments, so developers can choose the right scenario to use them.