Detailed description of Nuxt. js Vue server rendering, nuxt. jsvue

Detailed description of Nuxt. js Vue server rendering, nuxt. jsvue

This article uses nuxt for server rendering https://zh.nuxtjs.org/

Nuxt. js is very easy to use. A simple project simply needs to add nuxt as a dependent component.

Vue is favored by many front-end developers for its easy-to-understand APIs, efficient data binding, and flexible component systems. Many companies in China are using vue for project development. The short book we are using is built based on Vue.

We know that there are two pain points in SPA front-end rendering: (1) SEO. It is difficult for a search engine crawler to capture the meta information and other SEO-related information of the page rendered by the client, so that the website cannot be searched by users in the search engine. (2) user experience. After packaging a large webApp, JavaScript will be very large, so there will be a load by module, like require. js, asynchronous requests. Webpack becomes code segmentation. Even so, due to user devices, the initial page rendering may still be slow, and the white screen wait time is too long, which is unacceptable to the increasingly picky user groups.

Therefore, server-side rendering (SSR) is required for promotional pages, such as the official website ). Install nuxt. js

$ Vue init nuxt-community/starter-template <name of your project> // install dependencies later

// Install koa version $ vue init nuxt/koa <your project name>

Run

npm run dev

The application is currently running at http: // localhost: 3000

Note: Nuxt. js listens for file changes in the pages directory and automatically restarts the page. You do not need to manually restart the application when adding a new page.

Routing

Nuxt generates route Configurations Based on the pages directory structure

AsyncData

Note that the page component is required to call asyncData (that is, the page cannot be called under components and must be routed)

Asynchronous Data beforeCreate, created

Note: During the lifecycle of any vue component, only the beforeCreate and created hooks are called on both the browser side and the server side. Other hooks are called only on the browser side.

Use the plug-in mint-ui

First we need to add the plug-in file mint-ui.js in the plugins folder

import Vue from "vue";import Mint from "mint-ui";Vue.use(Mint);

Configure the plugins field in nuxt. config. js

/*** Configure a third-party plug-in */plugins: [{src :"~ Plugins/mint-ui ", ssr: true}], // At the same time, nuxt also supports distinguishing between plug-ins running only in the browser and running only on the server. // only run in the browser: configure nuxt. config. in js, set the introduced plug-in attribute to ssr: false // run only on the server: directly package the server in webpack. bundle. in the js file, set process. set SERVER_BUILD to true.

Layout

1. nuxt. js has implemented a new concept. layout allows us to conveniently switch between multiple layout S. Three Common la s are implemented in this project: 1) two-column layout, fixed on the left and dynamic width on the right; 2. Error Page prompt, the layout of a prompt box in the middle of the page; 3. Pure white page layout.

If the default layout is used in a developed page, you do not need to specify the page layout. The nuxt framework automatically associates the pages without the specified layout with the default layout. If you need to specify the layout, specify the layout in the layout field. The full layout is specified on the login page.

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.