Getting started with nuxtjs

Time:2021-5-3

Server side rendering (SSR)

Knowledge reserve

  • ES6
  • Nodejs
  • Vue
  • React
  • Angular

What is server side rendering

  • Front end rendering: the HTML page exists as a static file. When the front end requests, the back end does not modify the content of the file, but directly returns it to the front end in the form of resources. After the front end gets the page, it modifies the content of the HTML according to the JS code written on the HTML page.
  • Server side rendering: after the front end makes a request, the back end fills the specific area in the HTML page with data before returning the HTML page to the front end, and then returns the complete HTML to the front end. In spa scenario, the server side rendering is for the first get request. It will send the complete HTML to the browser, and the browser will render the first screen directly. There is no need for the browser side to get more Ajax requests to get data and render again.

Why server side rendering

advantage:

  • Better SEO, because the traditional search engine will only grab data from HTML, which will lead to the front-end rendering of the page can not be captured.
  • Faster time-to-content, especially for slow network conditions or slow running devices. About 80% of the first screen time is spent on the network, and the rest of the time is spent on the back-end data reading and browser rendering. Obviously, it is difficult to optimize the latter 20%, and optimizing the network time is the most effective means. The traditional Ajax request is to request JS first and then send data request by JS. The first screen time is two times plus the browser rendering time. SSR can combine two requests into one.

Disadvantages:

  • More server-side load.
  • Problems caused by the differences between the server and the browser environment, such as the problem that the document and other objects cannot be found.

How to choose

Suggestion: if you pay attention to SEO site, non strong interactive page, it is recommended to use SSR; For strong interactive applications such as background management pages, it is recommended to use front-end rendering.

1. Server side rendering of nuxt.js

Learning objectives

  • Understand the role of nuxt.js
  • Master the routing in nuxt.js
  • Master the differences among layouts, pages and components
  • Able to use element UI in nuxt.js project
  • Master the method of getting data asynchronously in nuxt.js
  • Complete small projects
  • Master the optimization of SEO

1.1 getting started with nuxt.js

1.1.1 what is nuxt.js

Vue server rendering official website

Nuxt.js official website

Nuxt.js is a general application framework based on vue.js.

1.1.2 the first nuxt application

npm i create-nuxt-app -g
create-nuxt-app my-nuxt-demo
cd my-nuxt-demo
npm run dev

1.1.3 file structure analysis

└─my-nuxt-demo
  . nuxt // automatically generated by nuxt, temporary file for editing, build
  ζ - assets // is used to organize uncompiled static resources such as less, sass or JavaScript. Static resource files that do not need to be processed by webpack can be placed in the static directory
  ζ - components // used for Vue components written by yourself, such as calendar component and paging component
  ζ - layouts // the layout directory, which is used to organize the layout components of the application and cannot be changed ⭐
  Θ - Middleware // used to store Middleware
  ├─node_modules
  ζ - pages // used to organize the routing and view of an application. Nuxt.js automatically generates the corresponding routing configuration according to the directory structure. The file name cannot be changed ⭐
  ζ - plugins // is used to organize JavaScript plug-ins that need to be run before the root vue.js application is instantiated.
  ζ - Static // is used to store static files of applications. Such files will not be built or compiled by nuxt.js calling webpack. When the server starts, the files in this directory will be mapped to the root path of the application. The folder name cannot be changed. ⭐
  └ - store // is used for vuex state management of organizational applications. The folder name cannot be changed. ⭐
  . editorconfig // development tool format configuration
  The configuration file of. Eslintrc.js // eslint is used to check the code format
  . gitignore // configure git ignore file
  ζ - nuxt.config.js // is used to organize the personalized configuration of nuxt.js applications so as to override the default configuration. The file name cannot be changed. ⭐
  ζ - package-lock.json // NPM is automatically generated to help the unified setting of package. Yarn has the same operation
  File - package.json // NPM package management configuration file
  ├─README.md

1.2 page and route

1.2.1 basic routing

Nuxt.js based onpagesThe directory structure automatically generates the routing configuration of Vue router module.

hypothesispagesThe directory structure of is as follows

└─pages
    ├─index.vue
    └─user
      ├─index.vue
      ├─one.vue

Then, the route configuration automatically generated by nuxt.js is as follows:

router: {
  routes: [
    {
      name: 'index',
      path: '/',
      component: 'pages/index.vue'
    },
    {
      name: 'user',
      path: '/user',
      component: 'pages/user/index.vue'
    },
    {
      name: 'user-one',
      path: '/user/one',
      component: 'pages/user/one.vue'
    }
  ]
}

1.2.2 page Jump

  1. Don’t write it as a tag, because it’s getting a new page, not spa
  2. this.$router.push(‘/users’)

1.2.3 dynamic routing

  • To define dynamic routing with parameters in nuxt.js, you need to create correspondingPrefix with underscoresVue file or directory for.
  • Get dynamic parameter {{$route. Params. ID}}

1.2.4 route parameter verification

Nuxt.js allows you to configure one in the corresponding page component of dynamic routingvalidateMethod is used to verify the validity of dynamic routing parameters. This function has a Boolean return value. If it returns true, it means the verification passed. If it returns false, it means the verification failed.

validate(data) {
  cosole.log(data)
  return true
}

1.2.5 nested routing

  1. Add a Vue file as the parent component
  2. Add a folder with the same name as the parent component to store the child view component
  3. In the parent file, addComponent, used to display the matched sub view

1.3 layouts & pages & components

1.3.1 create layout

  1. Go to the layouts folder to create a new layout component, such as teachers. Vue, and add it to this componentComponent, so that all pages related to teachers will have a common layout
  2. Add the layout property to the components that need to use teachers.vue, and specify the layout to use, for example: layout: ‘teachers’

1.3.2 create special layout: error

Create a new error.vue under the layouts folder. Error is the keyword

1.3.3 create a new component

Create a new header.vue component under the components folder
Introduce components, pay attention to the ~ symbol of the path, which represents the root directory
Components can also be used in layout

1.3.4 style configuration

Setting the file path of global CSS style in nuxt.config.js

1.4 using elementui

  1. Download NPM I element UI – S

  2. Under the plugins folder, create the elementui. JS file

    import Vue from 'vue'
    import ElementUI from 'element-ui'
    Vue.use(ElementUI)
  3. Add configuration in nuxt.config.js

    css: [
      'element-ui/lib/theme-chalk/index.css'
    ],
    plugins: [
      {src: '~/plugins/ElementUI', ssr: true }
    ],
    build: {
      vendor: ['element-ui']
    }

1.5 asynchronous data

Nuxt. JS extends Vue. JS by adding aasyncDataThis method enables us to acquire or process data asynchronously before setting data of components.asyncDataMethod is displayed in the component(Limited to page components)Called before each load. It can be called before the server or route updates. So you need to pay attention to this functionNousethis

Note: if you write asynchronously in the created hook, it is rendered on the client rather than on the server

usage method:asyncData(context, callback) {callback(null, data)}

context.route.params.xxxGet parameters

callback(new Error(), data)Render error page

Note: the difference between executing this method on the server side and on the client side

1.6 use of Axios

installnpm install --save axios

use

import axios from 'axios'

asyncData(context, callback) {
  axios.get('http://localhost:3301/in_theaters')
    .then(res => {
      console.log(res);
      callback(null, {list: res.data})
    })
}

In order to prevent repeated packaging, configure in nuxt.config.js

module.exports = {
  build: {
    vendor: ['axios']
  }
}

How to get data across domains by Axios in nuxt

  • Reference documents:https://axios.nuxtjs.org/
  • Reference documents:https://github.com/nuxt-community/proxy-module
  • Cross domain problem of Ajax
    • First of all: CORS handles cross domain, only the server needs to do some configuration, and the client can use it directly
    • Second, configure the server (any web server) proxy
      • Apache
      • nginx
      • tomcat
      • Node
      • Webpack dev server in webpack
    • Using Axios to send requests in nuxt
      • Configure nuxt
      • Nuxt provides a module @ nuxtjs / Axios
      • This module has built in an HTTP proxy middleware of node

1.7 small cases (Douban movie list)

Interface

http://api.douban.com/v2/movie/top250

http://api.douban.com/v2/movie/top250?start=0&count=100

Get movie list:http://localhost:3301/in_theaters(in_ They can be replaced by coming_ Soon and top 250)

Get movie details:http://localhost:3301/in_theaters/1?_embed=details

http://localhost:3301/in_theaters
http://localhost:3301/coming_soon
http://localhost:3301/top250
http://localhost:3301/details

1.7.1 creation of Douban movie Homepage

1.7.2 creation of Douban movie list page

1.7.3 movie details page

1.8 SEO optimization

1.8.1 overall situation

Modify in nuxt.config.js configuration file

head: {
	title: pkg.name,
	meta: [
		{ charset: 'utf-8' },
		{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
		{ hid: 'description', name: 'description', content: pkg.description }
	],
  link: [
    { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
  ]
},

1.8.2 local

head(){
  return{
    Title: 'Douban movie',
    meta:[{
    'name':'keywords',
    'content':'movie, classic movie, hit movie, TV series, American drama, movie review, cinema, movie ticket, ranking, recommendation '
    }]
  }
}

Recommended Today

Large scale distributed storage system: Principle Analysis and architecture practice.pdf

Focus on “Java back end technology stack” Reply to “interview” for full interview information Distributed storage system, which stores data in multiple independent devices. Traditional network storage system uses centralized storage server to store all data. Storage server becomes the bottleneck of system performance and the focus of reliability and security, which can not meet […]