Nuxt.js Vue server-side rendering exploration

This article mainly introduces the detailed explanation of Nuxt.js Vue server-side rendering. Now I share it with you and give you a reference.

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

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

Vue is favored by many front-end developers because of its simple and easy-to-understand API, efficient data binding and flexible component system. Many domestic companies are using Vue for project development. The Jianshu we are using is built based on Vue.

We know that there are two major pain points in SPA front-end rendering: (1) SEO. It is difficult for search engine crawlers to crawl client-rendered page meta information and other SEO-related information, making the website unsearchable by users in search engines. (2) User experience. The js after packaging of a large webApp will be very large, so there is loading by module, like require.js, asynchronous request. When webpack becomes popular, it becomes code splitting. Even so, depending on the user's device, the initial rendering of the page may still be very slow, and the waiting time for a white screen is too long, which is unacceptable to the increasingly picky user group.

Therefore, for those displaying promotional pages, such as official websites, server-side rendering (SSR) must be performed. Install nuxt.js

$ vue init nuxt-community/starter-template <你项目的名字>
// 后面 安装依赖你懂的

// 安装koa版本
$ vue init nuxt/koa <你的项目名字>

Run

npm run dev

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

Note: Nuxt.js will monitor file changes in the pages directory and Automatic restart, no need to manually restart the application when adding new pages.

Routing

nuxt generates routing configuration based on the pages directory structure

Asynchronous data asyncData

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

Asynchronous data beforeCreate, created

Note: In the life cycle of any vue component, there are only two beforeCreate and created This hook will be called on both the browser and server sides; the other hooks will only be called on the browser side.

Using 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);

In nuxt.config Configuring the plugins field in .js

/**
 * 配置第三方插件
 */
 plugins: [{ src: "~plugins/mint-ui", ssr: true }],

//同时nuxt还支持区分只在浏览器中运行和只在服务端运行的插件

//只在浏览器运行：配置nuxt.config.js中plugins字段，将引入的插件属性设置为ssr： false
//只在服务端运行：直接在webpack打包server.bundle.js文件中，将process.SERVER_BUILD设置为true即可

layout layout

1.nuxt.js implements a new concept, layout layout, which we can easily implement through layout layout Conveniently switch between multiple layouts of the page. Three commonly used layouts have been implemented in this project, namely: 1) two-column layout, with a fixed left column and a dynamic width of the right column; 2. Error page prompt, a layout scheme with a prompt box in the middle of the page; 3. Pure white page layout.

In a specific developed page, if the default layout is used, there is no need to specify the layout of the page. The nuxt framework will automatically associate the page without a specified layout with the default layout. If you need to specify the layout, specify the layout in the layout field. As shown in the figure, the full layout is specified in the login page.

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

How to use jQuery to implement mouse-responsive transparency gradient animation effect

JQuery-implemented mouse response buffer animation effect

How to implement mouse-responsive Taobao animation effect in jQuery

The above is the detailed content of Nuxt.js Vue server-side rendering exploration. For more information, please follow other related articles on the PHP Chinese website!