Using SSR (also called “universal” or “isomorphic” mode), the Node.js server renders Vue based components into HTML and transmits them to the client instead of pure javascript. Using SSR will bring a huge SEO boost, a better user experience, and more opportunities than traditional Vue SPA. Because implementing SSR independently by developers can be tedious, nuxt.js provides full support for this out of the box and helps you avoid common pitfalls.

Vue server rendering (SSR) and ordinary VUE differences, SSR basic use

Initialize the NuxtJS project

Nuxt.js presets various configurations needed to develop server-side rendered applications using vue.js.

1. Download and install Nuxt scaffolding

NPX create-nuxt-app Project name Note: NPX is installed by default in NPM version 5.2.0. To view the current version, enter NPM –version in the command line window

2. All questions and answers

Is that the name of your project?



What language to choose?



What package manager do YOU use?



Component library selection



Additional functionality



Code checker



The test framework

Server side rendering

Target server



The development tools



How do you manage your projects

3. Start

When finished, the project will install all dependencies, so the next step is to start the project:

cd xianyun npm run dev

If you want to conduct an anonymous survey, you can choose N

The url will appear if the download is successful

If 404 appears, you can try replacing it with 127, http://127.0.0.1:3000/ Note: nuxt.js listens for file changes in the Pages directory, so there is no need to restart the application when adding a new page.

Ii. Project file structure

The official document: zh.nuxtjs.org/guide/direc… Assets: assets directory for organizing uncompiled static resources such as LESS, SASS, or JavaScript Components component directory for organizing applications Middleware: middleware for hosting applications Nuxt.js framework reads all. Vue files in this directory and automatically generates corresponding route configuration plugins. Static: static file directory Store: Vuex status tree file used to organize applications Nuxt.config. js: used to organize the personalized configuration of the Nuxt.js application to override the default configuration package.json: used to describe the application’s dependencies and exposed script interfaces

Basic configuration

1. Modify or delete the default file

When Nuxtjs initialized the project, it gave us two demo files that were useless for the rest of the project: Pages /index.vue and Components /logo.vue.

1.1 modify the pages/index. Vue

<template>
  <div class="container">
    <div>
      <h1 class="title">Home page</h1>
    </div>
  </div>
</template>

<script>
export default {};
</script>
.<style lang="less" scoped>
</style>
Copy the code

1.2 Deleting the Components/Logo. vue file

Now if you open http://localhost:3000/, you’ll only see the home page

2. Create a page directory

Nuxtjs’s page access rules are different from those of the browser’s SPA mechanism. Nuxtjs does not require route configuration. Pages under Nuxtjs can be accessed directly through the path, and index.vue is searched by default

Example:

2.1 the effect

Now normal writing example: enter the url http://localhost:3000/+ file name to access

3. Create a component directory

4. If axios is omitted when creating the directory, there is no selection

Nuxtjs /axios: NPM I @nuxtjs/axios: nuxt,config,js:

// Modules (https://go.nuxtjs.dev/config-modules)
  modules: [
    //https://go.nuxtjs.dev/axios
    '@nuxtjs/axios',].//Axios modele configuration (https://go.nuxtjs.dev/config-axios)
  axios: {},
Copy the code

5. Download and add less

NPM install –save less less-loader nuxtjs has already been configured for us. There is no need to change the webPack configuration file, just install the dependency package

Nuxt and regular Vue

  1. NuxtIsomorphism refers to a set of code that can run in a browser or on a server (Nodejs) run, which means you can use the browser at the same timeAPIandNodejstheAPI.
  2. ordinaryVuePages are browser-onlyAPI, even in theNodejsEnvironment development is just useWebpackTo compile the package.
  3. NuxtIt is a collection of front and back end frames, and the front end is usedVue, the backend optional framework hasExpress, KOA2, Egg, APISo it can be understood asVueIs the existence of a page template, similar toart-template , ejs
  4. NuxtSupports single-page and multi-page applications.