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
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 .
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 .
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 .
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 .
Usually we develop Vue.js With the help of webpack structure , And then through .vue Single file to write components .
Want to know .vue How the file is parsed , We need to analyze the code in this well .
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 ！！！
author[@huihui_ new],Please bring the original link to reprint, thank you.
The sidebar is recommended
- vue2. How to register and login with 0 + koa2 + mongodb
- How to set the background color for individual pages in Vue cli
- Vue2 how to load more data on the scroll bar
- How to use margin and padding in CSS
- How does vue2x implement the vueslidershow function of the responsive adaptive rotation component plug-in
- How does vue2 recursive component implement tree menu
- How to use the three selectors of CSS
- Same blog, different styles -- hexo alternative construction
- Optimize nginx HTTPS latency - see how I can speed up nginx by 30%?
- The development model in the era of consumer Internet only transfers industrial elements from offline to online
guess what you like
Advanced features of Vue
CSS shadow advanced, to achieve a more three-dimensional shadow effect!
Differences between nginx forward and reverse proxy
Front end schema form configuration generation scheme
Units that can be used by the rotate method of transform in CSS
Why CSS3 sticky doesn't work?
[bug resolution] webpack error: module not found Did you mean xxx
[bug resolution] can't perform a react state update on an unmounted component This is ＞ a no-op, but it...
Remember to speed up the construction of a webpack
- Browser review hover element
- Vue insert iframe
- Vue realizes downloading pictures
- Some common problem-solving methods in Vue (sort out some truly effective methods that can be used in the project) (wait for continuous update and accumulation)
- About database data response to HTML page, Chinese appears? Solution to garbled code (multiple question marks)
- Ask a question about CSS selector
- When Vue jumps the route, the timer cannot be cleared in time
- Document is not defined
- Vuepress packaging deployment stepping on the road of the pit
- Vue quill editor stepping on pit record -- the echo style of rich text content is wrong
- The multi selection box of table in element is combined with paging to echo the bug step hole
- Vue project optimizes the loading speed of the first screen
- Use / deep / to report an error CSS (CSS selected expected)
- Nginx configuration
- Vue cli reverse proxy
- Vuex persistedstate plug-in - vuex persistent storage
- Automatic import of less
- Understanding and summary of CSS
- vue2. Implementation of X data response
- Props in react
- Bootstrap blazor table component (III) intelligent generation
- Based on centos7 + nginx + Daphne + uwsgi + django3 2 + supervisor + mysql8 single architecture server production environment deployment (I)
- Differences between vue2 and vue3 named slots
- Vue3: Axios cross domain request problem
- The difference between vue2 and vue3: keep alive
- Configure nginx and SSL certificate for Django project under Windows Environment
- Ant Design Vue: a-table custom column
- Using jQuery in Vue
- Vue dynamic loading picture problem
- Icons using Alibaba vector icon library in Vue
- Java Android mobile phone automatic basic learning element positioning
- Rancher configuring HTTPS domain name to access graphic tutorial
- Building a blog with GitHub pages + hexo (7) how to delete a published article successfully solved: delete it at the same time deploy_ Git folder
- Eight blog views / hexubs
- Build a blog with GitHub pages + hexo (9) set the next theme of hexo blog, and only part of the home page is displayed (not the full text)
- Building a blog with GitHub pages + hexo (10) the next theme of hexo blog mathjax mathematical formula rendering problem
- Hexo/Github. IO configure Tencent cloud CDN
- Details of Vue to react useeffect