Shulou(Shulou.com)06/03 Report--

This article mainly introduces the example analysis of Vue server rendering Nuxt, the article is very detailed, has a certain reference value, interested friends must read it!

What is SSR?

SSR, that is, server rendering, is to render the Vue page on the server side to generate a html file, and then transfer the html page to the browser. Advantages:

SEO differs from SPA's HTML in that only a HTML with no actual content and a HTML generated by app.js,SSR have content, which allows search engines to index the content of the page.

Faster content arrival time traditional SPA applications fetch bundle.js from the server, then parse it on the client side and mount it to dom. SSR, on the other hand, passes the HTML string directly to the browser. Greatly speed up the loading time of the first screen.

You can see from the following two pictures, the first is the HTML page generated by SSR, and the second is the HTML page generated by traditional SPA.

SSR

SPA

Nuxt.js

I read the official SSR introduction as well as the Nuxt.js documentation. In essence, SSR is the operation of the node back-end, and as I just want to write the front-end code, I don't want to go through too much trouble. And Nuxt.js integrates the functions of SSR perfectly. Let's use it right out of the box. Nuxt.js is also officially recommended to build SSR projects.

Benefits

I think Nuxt.js has several advantages over writing SSR yourself.

No need to configure Webpack: I was looking for the Webpack configuration at first, and after reading the documentation, I knew that nuxt had all been packaged for us. To modify the Webpack configuration, you only need to modify the nuxt.config.js file.

No node knowledge is required: as long as you can write a vue front end, you can write SSR. You don't need to know how to configure SSR, node and express (but now the front end will know more or less about node).

Integrated vue family bucket, directly available. No less convenient than vue-cli: install the Nuxt-- write component-- compile and start the service-- depending on the effect. It's that simple.

Simple configuration, document-friendly: take a closer look at the Nuxt.js document, you will find that the content is not much, and the function is very full, very suitable for starting.

Installation

The installation method is here. Quite simply, generate the template, then npm install the dependency, and then run it again.

Let's move it easily.

/ / vue-cli create nuxt template project $vue init nuxt-community/starter-template / / install dependency $cd $npm install// compile and start the service $npm run dev// open http://localhost:3000

Problems encountered in the installation:

Since async...await syntax is used in Nuxt.js, which is not supported by earlier versions of node, node must be upgraded to version 7.0.

Then it is recommended not to use cnpm, I use cnpm installation to run the old error report, feel that there is a hole.

Directory structure

Nuxt.js spends a lot of time talking about its directory structure, but in fact, if you understand the directory structure, you will get a general idea of Nuxt.js. Nuxt.js has configured everything for us, and we just need to create files and write code in the appropriate directory as it requires.

Assets requires compiled resource files, such as JavaScript, SASS, LESS, and so on.

Static does not require compiled static resource files, such as image resources.

Components, as its name implies, is the place where * .vue components are stored. General vue component writing.

Layouts layout directory, where the layout is set, where the tag is the content of the page we wrote. Can be used to add sections such as navigation bar, bottom bar, etc.

The middleware middleware catalog, the so-called middleware, is the function method executed in the page and page jump. For example, verify the operation of user information when the page jumps.

Pages page directory. Here's the point. This is where we keep the display pages. The files in this directory are converted to the corresponding routing path for browser access. In addition, the Nuxt.js in the * .vue page file in this directory provides some special methods for handling events in server rendering. Details about routing and special methods are listed below.

Pages routing

For a brief introduction to the components of the page and the use of special configuration items, please refer to API.

Plugins plug-in directory, third-party plug-ins like mint-ui are put here ~ specific usage see here.

The store vuex status Manager directory, if the directory is empty, Nuxt.js will not enable vuex. When we create the index.js file under this folder, we can use the vuex state manager. Here is the usage!

Nuxt.config.js this file is the only configuration item for Nuxt.js. As mentioned earlier, Nuxt.js encapsulates Webpack and other configurations, so if you need special configuration, you only need to modify this file to override the default configuration. For more information on configuration parameters, please see API.

Package.json does not explain.

Demo demo

Good news, VueStudyDemos has been updated again! Welcome Star~ article Demo has been included in VueStudyDemos.

Let's simply implement the functions mentioned in the following folders.

Resource loading

I added the font-awesome font library under the assets folder and put a logo picture of Vue in the static folder. The resource is then called.

Here you need to change the css of font-awesome into a global css to avoid the css of the import font library in every page you use. So we added the following configuration to nuxt.config.js.

Module.exports = {... Css: ['~ / assets/font-awesome/css/font-awesome.min.css'],...}

Component definition

The components are stored in the components folder, which we mentioned when we talked about the directory. The usage of components is the same as that of common vue components. Define the component Avatar and then use it in the Page page.

Import avatar from'~ / components/Avatar'export default {... Components: {avatar}}

Overall Arrangement

In the layouts directory, default is the default layout. We can modify the default layout or create a new layout to use.

The label in the layout file is the area we want the server to render.

Let's create a layout to play with.

/ / layouts/page.vue

Then we'll use the layout to configure the layout option in the pages page (if not, the default is default).

Export default {... Layout: 'page' / / defaults to' default'}

Middle ware

The so-called middleware is the behavior performed between two page jumps. For example, I define a middleware add.js.

Export default function ({store}) {store.commit ('increment')}

Then configure it in nuxt.config.js:

Module.exports = {... Router: {middleware: 'add'},...}

In this way, the middleware method is executed every time the page jumps. Of course, you can also define the middleware of a page separately, depending on the official website.

Page

The page is the * .vue file in the pages directory. Nuxt.js configures the directory structure as the vue-router routing system, so we can access the corresponding page directly through the file name (not to mention special routing).

For example, pages/app.vue files can be accessed through http://localhost:3000/app.

Note: page components are written in the same way as commonly used Vue components, but Nuxt.js also provides some special configuration items to configure server rendering behavior. Please see the document on the page for specific configuration.

Routin

Routing is what makes the pages directory accessible directly. Nuxt.js cleverly uses directory structure and file names to cover all the uses of vue-router. Such as dynamic routing, nested routing and so on. Please refer to the documentation for details. You can also take a look at demo's pages directory.

Plug-in

For front-end projects, the use of plug-ins is of course essential. This aspect is clearly stated on the official website. Let me post the usage in demo. The mint-ui library is used here.

/ / plugins/mint-ui.jsimport Vue from 'vue'import MintUI from' mint-ui'import 'mint-ui/lib/style.css'Vue.use (MintUI) / / nuxt.config.jsmodule.exports = {build: {vendor: [' mint-ui']}, plugins: ['~ plugins/mint-ui']}

So you can use the third-party library mint-ui!

Option one, option two, option three.

Vuex

For vuex, there are two ways to use it: normal and modular, the same as our commonly used vuex. My demo is to copy the code directly from the official website.

It is important to note that the vuex data will be stored in the context object, and we can get the state data through the context object.

Publish

There are two ways for publishing: server application rendering deployment and static deployment

Last

If you look at Nuxt.js 's API, you will find that Nuxt.js is really highly packaged. For the template project generated by Nuxt.js, there are only some necessary configurations that we need to complete. Nuxt.js can be said to be a very friendly and powerful SSR framework.

The above is all the contents of the article "sample Analysis of Vue Server rendering Nuxt". Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.