Detailed Duert.js Vue server rendering exploration

This article uses NUXT to perform server rendering https://en.nuxtjs.org/

nuxt.js is easy to use. A simple project simply adds nuXT to dependence.

Vue the API for its straightforward, efficient and flexible data binding components of the system, favored by many developers distal end. Many domestic companies are using Vue for project development, and the short-term book we are using is based on VUE.

We know that there are two major pain points in the front of the SPA: (1) SEO. Search engine reptiles are difficult to capture the client rendered page META information and other SEO-related information, so that the website cannot be searched by the user in the search engine. (2) User experience. The JS after large WebApp is huge, so there is a module, just as Require.js, asynchronous requests. Webpack prevails, it becomes code segmentation. Even so, subject to user equipment, the page initial rendering is still very slow, the white screen is waiting for too long, and it is unacceptable to the increasingly picky user group.

Therefore, the server rendering (SSR) must be performed for those display promotional pages, such as official website. Install nuXt.js

$ vue init nuXT-Community / start-template
// Back installation depending on you understand
    / / Install KOA version $ Vue Init nuXT / KOA 
Operation
   NPM Run Dev  
Application is now running at http: // localhost: 3000

Note:Nuxt.js will monitor file changes in your pages directory and automatically restart, and there is no need to restart your application when adding a new page.
  routes  
nuxt according pages directory structure generation routing configuration


Asynchronous data asyncData

Note page components must be in order to call asyncData (that is, under the components can not be invoked, the job must be routed pages)

asynchronous data beforeCreate, created Note: the life of the components in any vue During the cycle, only BeforeCreate and Created These two hooks are called in the browser and the server; other hooks will only call on the browser.


using the plug-mint-ui

First of all we need to add 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.js Configure the PLUGINS field


 / ** * Configure a third party plug-in * / plugins: [{src: "~ plugins / mint-ui" , ssr: true}], // while nuxt also supports case only run and only // run only plug the server to run in the browser in the browser: configuration plugins field nuxt.config.js, will introduce a plug-in The property is set to SSR: false // only runs on the server: Package the SS directly in WebpackIn the ERVER.Bundle.js file, set process.server_build   

Layout layout

1.Nuxt. Js implements a new concept, the layout of the Layout, we can easily switch between multiple layouts of the page via the Layout layout. This project implements three common layouts, namely: 1) two-column layout, left column fixed, right column dynamic width; 2. Error page prompt, page in the middle of a prompt box, 3, pure white page layout.
 In the specific development page, if you use the default layout, you don't need to specify the layout of the page, the NUXT framework automatically associates the page and the default layout without the specified layout. If you need to specify a layout, the layout is specified in the Layout field. The Full layout is specified as shown in the Login page.   
The above is all the content of this article, I hope to help everyone, I hope everyone will support Tumi Clouds.
© Copyright Notice
THE END
Just support it if you like
like0
share
comment Grab the couch

Please log in to comment