The background,

When I started to contact VUE at the beginning of this year, I found that the nuxt. js framework was mentioned in the section of “Server rendering” in the official vue document. SSR is an obvious way to optimize the loading time of the first screen, and it is also convenient for SEO. In meituan-Dianping’s ordering business, the data platform takes a long time to load due to its large amount of data, which is very suitable for SSR transformation. So I tried the Nuxt.js framework out of hours and ate a bunch of crabs. In this paper, the application of Nuxt. js framework in production environment is systematically discussed, and the pit is also introduced.

Nuxt.js:

Properly configuring all the discussed aspects of a production-ready server-rendered app can be a daunting task. Luckily, there is an excellent community project that aims to make all of this easier: Nuxt.js. Nuxt.js is a higher-level framework built on top of the Vue ecosystem which provides an extremely streamlined development experience for writing universal Vue applications. Better yet, you can even use it as a static site generator (with pages authored as single-file Vue components)! We highly recommend giving it a try.

Vue official attitude towards nuxt.js is very positive, it is worth trying, the latest version: 1.0.0-rc2; Version 1.0 will be released soon.

Due to the author’s level, if there is a mistake, welcome to clap brick.

Nuxt.js

1. Schematic diagram of Nuxt.js

The specific principle is explained in detail on the official website. Readers are welcome to go to the official website and will not repeat it here.

2. Advantages of Nuxt.js

3. Technology stack selection

Nuxt.js: 0.10.6

Axios: 0.16.2 → The reason for choosing Axios is simple, it is vUE’s official recommended package, and AXIos can run on both browser and server side, reducing the learning cost of front-end engineers.

ElementUI: 1.3.7 → elementUI is a comprehensive LIBRARY of UI components based on VUE, suitable for a validation project of your own, can be developed quickly, quickly online.

Iv. Implementation Plan

The directory structure of the project is as follows:

1. Plug-in installation

You can configure the JS plug-ins that need to be run before the root vue.js application is instantiated, either by yourself or by a third party.

Note that during the life of any VUE component, only beforeCreate and Created hooks are called on both the browser side and the server side; All other hooks are called only on the browser side.

1) Ajax request plug-ins such as AXIos will undoubtedly be used in all aspects of the page, so if you introduce them in the form of an import on each page, you will end up packaging them multiple times during packaging. In fact, we only need to package once, which can be solved by the build.vendor in nuxt.config.js.

Of course, if you need to differentiate the interface addresses of the test and online environments, you need to write axios in plugins, as shown in the following figure:

2) Use the VUE plugin – elementUI

Normal NPM packages are introduced in the same way as axios above, but what about vue plug-ins?

1. First we need to add the plugin file, element-ui.js, to the plugins folder
   
   

   
   
   

   
   
   

2. Configure the plugins field in nuxt.config.js
   
   

   
   
   

3. Since elementUI is a third-party library, we need to package it into a library file for better caching. Simply configure element-ui in nuxt.config.js.
   
   

   
   
   

3) Nuxt also supports differentiating between plugins that run only in the browser and those that run only on the server.

1. Run in browser only: Configure the plugins field in nuxt.config.js and set the imported plug-in property to SSR: false
   
   

   
   
   

2. Run only on the server side: set process.SERVER_BUILD to true directly in the webPack server.bundle.js file

2) Layout

Nuxt.js implements a new concept called layout. We can easily switch between multiple layouts of the page through layout. Three commonly used layouts are realized in this project, namely: 1) two-column layout with fixed left column and dynamic width of right column; 2. Error page prompt, layout scheme of a prompt box in the middle of the page; 3. Plain white page layout.

Take the two-column layout as an example:

1. First, write the default layout in Layout → default.vue
   
   

   
   
   

   Layout and the specific content of the page socket: NUxT tag

2. If the default layout is used in a specific page, there is no need to specify the layout of the page. The NUXT framework will automatically associate the page that does not specify the layout with the default layout. If you need to specify a layout, specify the layout in the Layout field. The full layout is specified on the Login page as shown.
   
   

   
   
   

Layout is great for projects with variable page types. We can reduce redundant code and make it easy for developers to switch between multiple layouts. The NUXT framework divides the page into 3 layers: 1. Layout; 2. Page; 3, components,

This division is logically clearer and closer to the idea of componentized page development.

PS: Individuals in non-VUE projects have also implemented a simple layout using slot slots.

The Layout file provides slot slots

Introduce the Layout file as a component on the development page.

3. Server-side API writing

The NuxT server uses Express. Therefore, you can write the Express Router directly on the server API. The server directory organization is shown as follows:

Server /index.js files are express startup files, plugins and middleware files are AXIOS configurations, and the API interfaces are in the API folder.

The server/index.js file references the API as follows:

Let’s take a look at the configuration of Axios, which differentiates online from test environments by matching process.env and authenticating interfaces in the Middleware file.

The interfaces are then referenced and aggregated in the API /index.js file

In all interface files, take announcement. Js as an example:

As you can see, to achieve simplicity and avoid excessive design, the API interface does not repackage the data, but directly carries on the transparent processing.

4. Page routing

Nuxt framework uses vue-Router for page routing, but we don’t need to worry too much about page routing because we can automatically generate vue-Router files as long as we follow the nuXT specification for page file directory structure. Or the directory structure in which we store our pages directly affects the resulting routing configuration.

The page directory structure of this project is shown in the figure below:

The generated router file is:

You can see that the generated routes correspond to the Pages folder directory structure.

Note: For dynamic routes with parameters, you need to create vUE files or directories prefixed with underscores. For example, in the bidDetail/_id. Vue file, the resulting route is: path: “/bidDetail/:id?” .

Five, the summary

Building a server rendering framework from scratch is actually quite complicated, but with Nuxt.js, we can easily build an extensible and customizable SSR framework, which greatly reduces the time cost of building the framework. Because the official nuXT document is written in sufficient detail, I did not describe the installation of such general items, directly from the plug-in installation, new concept – layout layout, server API, pages organization, introduced my use of nuXT framework in the actual project some key path. At present, the project has been online in AWS for more than half a month and is generally stable, indicating that although NUXT is not version 1.0, it is enough to be used in production practice. (Consider what github says. With nuxT version 1.0 coming up, there’s reason to expect vUE’s SSR future)

The author of this article cannot cover all the details of the project due to lack of space. Readers who are interested in NUXT can contact us at [email protected]. Thank you