I introduction
along withreact
Communitynext.js
The release of the framework,vue
The community finally gave birth to its own isomorphic framework of front and rear ends.nuxt.js
. In further contact and use, it was found thatnuxt.js
It is indeed extremely convenientvue
The logic behind the development of the project is also worth pondering. Aboutnuxt
Please refer to for specific usage ofOfficial documentsThis article will not go into details one by one.
This article mainly studiesnuxt
The operation principle of the, analyze it from receiving anuxt
Instructions, to complete the instructions behind a series of things.
Before starting this article, please readBe sure toExperienced personallynuxt.js
The use of, and have certainvue.js
Relevant development experience.
II. NUXT Instruction
By viewingnuxt.js
Under the engineering cataloguepackage.json
File, we can see the following instructions:
"scripts": {
"dev": "nuxt",
"build": "nuxt build",
"start": "nuxt start",
"generate": "nuxt generate"
}
Combined with the introduction of the official website, we can know that different instructions correspond to different functions:
instructions | describe |
---|---|
nuxt | Turn on a server that listens to 3000 ports and provides hot-reloading function at the same time. |
nuxt build | Build the entire application, compress and merge JS and CSS files (for production environment) |
nuxt start | The server that opens a production mode (must run firstnuxt build Command) |
nuxt generate | Build the entire application and generate a static page for each route (for static servers) |
The above instructions are also the focus of this article: behind these instructions,nuxt
What kind of work have you done?
Iii. executing instructions
Opennuxt.js
The project directory, into tobin
Directory, we can see 5 files:
|__ nuxt
|__ nuxt-build
|__ nuxt-dev
|__ nuxt-generate
|__ nuxt-start
Each file corresponds to a different instruction. Let’s analyze the execution process of each instruction through a diagram:
From the above figure, it can be seen that each instruction basically did such a few things:
-
read
nuxt.config.js
Configuration of files; -
Instantiation
Nuxt()
Class and overwrites the configuration read in the previous stepNuxt()
The default configuration of the class; -
Execute each specific method function.
The corresponding code is as follows (excerpt):
var nuxtConfigFile = resolve(rootDir, 'nuxt.config.js')
var options = {}
if (fs.existsSync(nuxtConfigFile)) {
options = require(nuxtConfigFile)
}
if (typeof options.rootDir ! == 'string') {
options.rootDir = rootDir
}
var nuxt = new Nuxt(options)
nuxt.build()
The first step is to read the configuration and the contents of the configuration can be viewed.Official website descriptionNext we will discuss the second and third steps in depth.
Iv.Nuxt()
Class
Enter intonuxt/lib
Directory, we can see the following file directory structure:
|__ app
|__ build
|__ index.js
|__ webpack
|__ generate.js
|__ nuxt.js
|__ render.js
|__ server.js
|__ utils.js
|__ views
In the catalognuxt.js
The document is what we want to instantiate.Nuxt()
Where the class is located, let’s look at what it contains and what their respective functions are:
Each step in the above figure can be browsed by itself in the specific code. After the user inputs the instruction and instantiates itNuxt()
Class, instantiatednuxt
Objects will execute several methods with green checkmarks in the diagram:build()
,render()
,renderRoute()
,renderAndGetWindow()
as well asgenerate()
Methods.
At the same time,Nuxt()
Class also provides aclose()
The public method used to shut down the server it is opening.
Five,build()
Method
build()
The method corresponds tonuxt/lib/build/index.js
The basic composition of the document is as follows:
In short,build()
Methods After judging the operation conditions, the output directory will be initialized first.nuxt
, and then generate a series of configurations through file structures under different directories, and output to after writing the template file.nuxt
Directory. Next, different webpack configurations will be called according to different development environments to run different webpack building schemes.
Six,render.js
File
Innuxt/lib
Found in directoryrender.js
File, it contains three methods that we are going to analyze:render()
,renderRoute()
,renderAndGetWindow()
.
From this picture, we can knownuxt
The logic for handling “client rendering” and “server rendering” is very clear.
First of all, inrender()
Method is called after processing a series of path problemsrenderRoute()
Method to obtain the required content of the response and complete the response.
among themrenderRoute()
The method determines whether the current response should perform server-side rendering. If so, calls thevue
ProvidedbundleRenderer()
Method, the html content is rendered and then output as a whole; If not, output one directly<div id="__nuxt"></div>
String to be rendered by the client.
Finally, throughrenderAndGetWindow()
To check whether there is a problem with the output html, and then send a notification that html is available.
Seven,generate.js
File
Finally, let’s analyze itgenerate.js
Documents. We knownuxt generate
The command will bepage
Each page file under the directory generates an html static page separately, which is very considerate in function. Thengenerate.js
How does it work?
In progressnuxt generate
, it will first perform the above analysisbuild()
Method to produce compiled files; It will then initializedist
Directory, callresolveRouteParams()
Method, read the routing configuration after output and sort it out. Then throughfs.writeFile()
Such as API, write the content into the file one by one and output, and finally count the totalgenerate()
Running time.
Eight, write at the end
Nuxt
It is a newly born project, and the official website documents have not yet been completed. From the perspective of a user, this is a very interesting project.VueJS
The author Yoda also praised the project inVueJS websiteThey are also specially recommended.
This interesting project is really worthy of in-depth study, and the author’s code and comments are also very clear and detailed. This article is limited to personal level, there are inevitably mistakes in analysis and understanding, welcome readers to correct me!