I introduction

Nuxt.js – Universal Vue.js Applications

along withreactCommunitynext.jsThe release of the framework,vueThe 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.jsIt is indeed extremely convenientvueThe logic behind the development of the project is also worth pondering. AboutnuxtPlease refer to for specific usage ofOfficial documentsThis article will not go into details one by one.

This article mainly studiesnuxtThe operation principle of the, analyze it from receiving anuxtInstructions, to complete the instructions behind a series of things.

Before starting this article, please readBe sure toExperienced personallynuxt.jsThe use of, and have certainvue.jsRelevant development experience.

II. NUXT Instruction

By viewingnuxt.jsUnder the engineering cataloguepackage.jsonFile, 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:

The above instructions are also the focus of this article: behind these instructions,nuxtWhat kind of work have you done?

Iii. executing instructions

Opennuxt.jsThe project directory, into tobinDirectory, 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:

1. readnuxt.config.jsConfiguration of files;

2. InstantiationNuxt()Class and overwrites the configuration read in the previous stepNuxt()The default configuration of the class;

3. 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/libDirectory, 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.jsThe 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, instantiatednuxtObjects 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.jsThe 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.nuxtDirectory. Next, different webpack configurations will be called according to different development environments to run different webpack building schemes.

Six,render.jsFile

Innuxt/libFound in directoryrender.jsFile, it contains three methods that we are going to analyze:render(),renderRoute(),renderAndGetWindow().

From this picture, we can knownuxtThe 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 thevueProvidedbundleRenderer()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.jsFile

Finally, let’s analyze itgenerate.jsDocuments. We knownuxt generateThe command will bepageEach page file under the directory generates an html static page separately, which is very considerate in function. Thengenerate.jsHow does it work?

In progressnuxt generate, it will first perform the above analysisbuild()Method to produce compiled files; It will then initializedistDirectory, 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

NuxtIt 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.VueJSThe 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!