Author: The Empress Dowager @ edamame front

As the usage of Vue continues to grow, more and more pages are using browser rendering, which greatly improves the quality and efficiency of front-end development, but also brings about slow first screen rendering, SEO unfriendly and other problems. Vue based SSR framework Nuxt.js is a good solution to this problem, page straight out, front and back end ishomogeneous, not only solve the first screen straight out rendering, SEO and other issues, in the development of quality and efficiency without any loss.

Nuxt.js

Nuxt.js is a SSR framework for Vue, using modular architecture, easy to use, good performance. The developers of Nuxt.js were active and the release iteration was rapid, with the official v1.0.0 release released on January 9, 2018. It is also highly recommended by Vue’s official website. Let’s take a look at the power of Nuxt.js.

Second, SSR model establishment

Nuxt.js is a general application framework based on vue.js. Its core is to realize server rendering through vue-server-renderer module. Vue-server-renderer is a module that is rendered by node.js on the Vue server to generate HTML content. The steps are as follows:

  1. npm install vue vue-server-renderer –save-dev
  2. The structure of the new project is as follows:

  1. Write code in the server.js file:

  1. Write HTML in template.html, note
    This must be written, equivalent to a placeholder, to be filled with the page content rendered by the server.

  1. Run the node server.js command to start the service

  2. Open the browser to http://localhost:3100/, and you will see data-server-Rendered = true, indicating that the server is rendered

Create a nuxt.js project

  1. The installation

Make sure NPX is installed (NPX is installed by default in NPM version 5.2.0)

  • NPX create-nuxt-app < project name >
  • npm install # or yarn
  • npm run dev

After the above three steps, open a browser and access localhost:3000, which is not too different from creating a Vue project. The project directory structure is as follows:

  1. Nuxt routing mechanism

Any Vue components in the Pages directory are automatically added to vue-Router based on their file name and directory structure. Nuxt can generate the corresponding route configuration, which can be reflected in.nuxt/rouer.js, as shown in the figure:

Add child view content to parent vue file

In order to meet the different needs of the business, as well as dynamic routing, dynamic embedded routines by functions such as, can consult website description: zh.nuxtjs.org/guide/routi…

  1. Assets and static Use static resources

Assets contain uncompiled resources and have more to do with how WebPack loads and processes files than with how Nuxt works.

Static contains static files that map to the root directory of your site.

For example: < img SRC =”~/assets/timg.jpeg”/> For static assets: < img SRC =”timg.jpeg”/>

  1. Layouts use

Create a new layout, a.vue file, in the layouts directory as follows

export default {

 layout: 'admin-layout'

}
Copy the code

Note: If you enter an incorrect URL, an error page will be displayed. In fact, the error page is a different layout. Nuxt has its own error page layout, but if you want to edit it, just create an error.vue layout, and Nuxt will use this layout instead of the default

  1. Middleware use

Middleware allows you to define a custom function to run before a page or layout (providing a context parameter that takes information from both server and client). For example, we judge permission interception before rendering the page, or jump to the appropriate route based on user permission, etc. For example, to redirect to a specified route in the local development environment, you can configure it as follows:

  • First we need to add auth.js to the Middleware folder

  • Configure it in the nuxt.config.js file

  • Open localhost:3000/ in the browser, and the system will access localhost:3000/dev

You can configure the JS plug-ins that need to be run before the vue application is instantiated, either your own libraries or third-party libraries. For example: Ajax request plug-ins like AXIos, element-UI third-party libraries, etc. For example, element-UI can be configured like this:

  • First we need to add the plugin file element-ui.js to the plugins folder

  • Configure the plugins field in nuxt.config.js to set the imported plug-in property SSR: false only when the client is running

  • Head is used to configure the default meta tag

  • CSS is used to define an application’s global style file, module, or third-party library

  • Dev configuration is in development or production mode

  • Loading Customizes the loading component used by must. Js

  • Env defines environment variables for both client and server

…

More can be found on the official website