# Brief introduction of Vue source code directory design

2022-04-29 04:28:14

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 ！！！