JS——Nuxt 基础知识

Posted 2020-12-03 cnloop

vue.js 是单页面应用，但是对 seo 不友好，nuxt 是基于vue 开发的服务端渲染的框架，最后项目可以打包多个静态页面，解决了 seo 问题

过度动效

• Nuxt.js 默认使用的过渡效果名称位 page

asyncData

• asyncData 方法会在组件（仅限于页面组件）每次加载之前被调用，第一个参数是当前页面的 上下文对象，可以利用此方法从后台获取数据，Nuxt.js 会将 asyncData 返回的数据融合到 data 中

• 建议，不要使用此方法，因为 created 也能够达到这样的效果，最关键的是下面会说到使用自定义插件的时候，asyncData 方法无法在上下文对象中拿到我们自己定义的属性

插件加载

• 这里我们详细说下，如何将 axios 作为整合到 Vue 实例中去

• 如果我们的项目是基于 JWT，或许我们需要客户每次发送请求的时候都附带上存储在本地的 Token，

• 在项目的 plugins目录下新建文件夹和文件，/plugin/http/http.js，/plugin/http/index.js

• /plugin/http/http.js，内容如下

import axios from ‘axios‘

export const http = axios.create({
  baseURL: ‘http://localhost:8888‘
})


http.interceptors.request.use(function (config) {
  //.....
  config.headers[‘Authorization‘] = ‘token‘
  return config
}, function (error) {
  return Promise.reject(error)
})

// console.log(this.$store)
http.interceptors.response.use(function (response) {
  var code = response.data.code;
  if (code === 403) {
    //......
  }
  return response
}, function (error) {
  return Promise.reject(error)
})


const httpPlugin = {}

httpPlugin.install = function (Vue, options) {
  Vue.prototype.$http = http
}

export default httpPlugin;

• /plugin/http/index.js，内容如下

import Vue from ‘vue‘

import httpPlugin from ‘./http.js‘

Vue.use(httpPlugin)

• nuxt.config.js 下添加配置

module.exports = {
  plugins: [‘~/plugins/http/index.js‘]
}