Home Web Front-end JS Tutorial Detailed explanation of Nuxt.js Vue server-side rendering

Detailed explanation of Nuxt.js Vue server-side rendering

Feb 09, 2018 am 10:11 AM
javascript Detailed explanation

Nuxt.js is very simple and easy to use. A simple project just needs to add nuxt as a dependent component. This article mainly introduces you to Nuxt.js Vue server-side rendering and gives you a reference. I hope it can help you.

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 <你项目的名字>
// 后面 安装依赖你懂的
Copy after login


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

Run


npm run dev
Copy after login

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

Note: Nuxt.js will listen for file changes in the pages directory and automatically restart. There is no need to manually restart the application when adding a new page.

Routing

nuxt generates routing configuration based on the pages directory structure

Asynchronous data asyncData

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

Asynchronous data beforeCreate, created

Note: In the life of any vue component During the cycle, only the two hooks beforeCreate and created will be called on both the browser side and the server side; 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);
Copy after login

Configure the plugins field in nuxt.config.js


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

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

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

layout layout

1.nuxt.js implements a new concept, layout layout. We can conveniently switch between multiple layouts of the page through layout layout. 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.

Related recommendations:

Vue.js and ASP.NET Core server-side rendering function

Nuxt Vue.js server-side rendering practice

Detailed explanation of React server-side rendering examples

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

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Detailed explanation of obtaining administrator rights in Win11 Detailed explanation of obtaining administrator rights in Win11 Mar 08, 2024 pm 03:06 PM

Windows operating system is one of the most popular operating systems in the world, and its new version Win11 has attracted much attention. In the Win11 system, obtaining administrator rights is an important operation. Administrator rights allow users to perform more operations and settings on the system. This article will introduce in detail how to obtain administrator permissions in Win11 system and how to effectively manage permissions. In the Win11 system, administrator rights are divided into two types: local administrator and domain administrator. A local administrator has full administrative rights to the local computer

Detailed explanation of division operation in Oracle SQL Detailed explanation of division operation in Oracle SQL Mar 10, 2024 am 09:51 AM

Detailed explanation of division operation in OracleSQL In OracleSQL, division operation is a common and important mathematical operation, used to calculate the result of dividing two numbers. Division is often used in database queries, so understanding the division operation and its usage in OracleSQL is one of the essential skills for database developers. This article will discuss the relevant knowledge of division operations in OracleSQL in detail and provide specific code examples for readers' reference. 1. Division operation in OracleSQL

Detailed explanation of the role and usage of PHP modulo operator Detailed explanation of the role and usage of PHP modulo operator Mar 19, 2024 pm 04:33 PM

The modulo operator (%) in PHP is used to obtain the remainder of the division of two numbers. In this article, we will discuss the role and usage of the modulo operator in detail, and provide specific code examples to help readers better understand. 1. The role of the modulo operator In mathematics, when we divide an integer by another integer, we get a quotient and a remainder. For example, when we divide 10 by 3, the quotient is 3 and the remainder is 1. The modulo operator is used to obtain this remainder. 2. Usage of the modulo operator In PHP, use the % symbol to represent the modulus

Detailed explanation of the linux system call system() function Detailed explanation of the linux system call system() function Feb 22, 2024 pm 08:21 PM

Detailed explanation of Linux system call system() function System call is a very important part of the Linux operating system. It provides a way to interact with the system kernel. Among them, the system() function is one of the commonly used system call functions. This article will introduce the use of the system() function in detail and provide corresponding code examples. Basic Concepts of System Calls System calls are a way for user programs to interact with the operating system kernel. User programs request the operating system by calling system call functions

Simple JavaScript Tutorial: How to Get HTTP Status Code Simple JavaScript Tutorial: How to Get HTTP Status Code Jan 05, 2024 pm 06:08 PM

JavaScript tutorial: How to get HTTP status code, specific code examples are required. Preface: In web development, data interaction with the server is often involved. When communicating with the server, we often need to obtain the returned HTTP status code to determine whether the operation is successful, and perform corresponding processing based on different status codes. This article will teach you how to use JavaScript to obtain HTTP status codes and provide some practical code examples. Using XMLHttpRequest

Detailed explanation of Linux curl command Detailed explanation of Linux curl command Feb 21, 2024 pm 10:33 PM

Detailed explanation of Linux's curl command Summary: curl is a powerful command line tool used for data communication with the server. This article will introduce the basic usage of the curl command and provide actual code examples to help readers better understand and apply the command. 1. What is curl? curl is a command line tool used to send and receive various network requests. It supports multiple protocols, such as HTTP, FTP, TELNET, etc., and provides rich functions, such as file upload, file download, data transmission, proxy

Learn more about Promise.resolve() Learn more about Promise.resolve() Feb 18, 2024 pm 07:13 PM

Detailed explanation of Promise.resolve() requires specific code examples. Promise is a mechanism in JavaScript for handling asynchronous operations. In actual development, it is often necessary to handle some asynchronous tasks that need to be executed in sequence, and the Promise.resolve() method is used to return a Promise object that has been fulfilled. Promise.resolve() is a static method of the Promise class, which accepts a

Detailed analysis of C language learning route Detailed analysis of C language learning route Feb 18, 2024 am 10:38 AM

As a programming language widely used in the field of software development, C language is the first choice for many beginner programmers. Learning C language can not only help us establish the basic knowledge of programming, but also improve our problem-solving and thinking abilities. This article will introduce in detail a C language learning roadmap to help beginners better plan their learning process. 1. Learn basic grammar Before starting to learn C language, we first need to understand the basic grammar rules of C language. This includes variables and data types, operators, control statements (such as if statements,

See all articles