current position:Home>Brief introduction of Vue source code directory design

Brief introduction of Vue source code directory design

2022-04-29 04:28:14@huihui_ new

Study vue.js Source code , First, learn the source code directory ,vue.js The source code of src Under the table of contents , The directory structure is as follows :

src
├── compiler        #  Compiler related  
├── core            #  Core code  
├── platforms       #  Support of different platforms 
├── server          #  Server rendering 
├── sfc             # .vue  File parsing 
├── shared          #  Shared code 

1.compiler

compiler The directory mainly stores the code related to compilation , For example, we vue As defined in template The grammar of , Browsers don't recognize , So before running the code we wrote , Need to put template The syntax in the template is parsed into code recognized by the browser . And this process is called compiling .

2.core

Here is mainly placed vue.js Core code , Includes built-in components 、 overall situation API、 Instantiation 、 The observer 、 Tool function 、 fictitious dom And so on . The structure is shown in the following figure :

core
├── components      #  Built in components 
├── global-api      #  Global component related 
├── instance        #  Instantiation related 
├── observer        #  Observer correlation 
├── util            #  Tool function 
├── vdom            #  fictitious dom

The code here is vue At the heart of , The response principle includes 、 Observer mode 、 fictitious dom When you can hear vue The core idea Basically included in it .

3.platform

vue.js It is a cross platform framework , Can run in web On , Can also cooperate weex Run in the native On the client side ,platform yes Vue.js Entrance ,2 Directory representatives 2 Main entrances , Separately packaged to run in web Shanghe weex Upper Vue.js.

platform
├── web             # web End 
├── weex            # weex End 

I mainly do web End development , Focus on web End rendering , That is to say web menu ,vue The instantiated entry file is also in this directory .

4.server

Vue.js Support server-side rendering , All server rendering related logic is in this directory . Be careful : This part of the code is running on the server side Node.js.

The main work of server-side rendering is to render components to server-side HTML character string , Send them directly to the browser , Finally, we will mark it statically " blend " For fully interactive applications on the client side .

For server-side rendering, you need to pay more attention to the code .

5.sfc

Usually we develop Vue.js With the help of webpack structure , And then through .vue Single file to write components .
The code logic in this directory will put .vue The file content is parsed into a JavaScript The object of .

Want to know .vue How the file is parsed , We need to analyze the code in this well .

6.shared

Vue.js Will define some tool methods , The tools and methods defined here are similar to core It's different , It will be shared by browser and server .

shared
├── constant.js     #  Defines some constants that need to be used globally 
├── util.js         #  Some common tools and methods 

Knowing the structure of the directory can better learn the source code , Let's learn together !!!

copyright notice
author[@huihui_ new],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2022/117/202204270551339202.html

Random recommended