Nuxt的使用

Nuxt生成的目录：

middleware: 中间件（简单的来说就是一个函数）
写一个最简单的中间件：

使用中间件：

nuxt中的生命周期执行：

asyncData: nuxt增加的生命周期，在组件初始化前调用。所以没有vue中的this（只在能page页面里写）。在这个生命钩子里面return的结果会合并返回到data上面

nuxt里面顶部加载进度条：

进度条颜色：

Nuxt.js 默认的配置涵盖了大部分使用情形，可通过 nuxt.config.js 来覆盖默认的配置
例：
build：Nuxt.js 允许你在自动生成的 vendor.bundle.js 文件中添加一些模块，以减少应用 bundle 的体积。如果你的应用依赖第三方模块，这个配置项是十分实用的。
css：该配置项用于定义应用的全局（所有页面均需引用的）样式文件、模块或第三方库
。。。详细配置查看官网文档

路由：详细配置查看官网文档
（注意：要在页面之间使用路由，我们建议使用 标签。 相对于进行导航。相当于 将路由匹配到的组件将渲染在这里）

布局：Nuxt.js 允许你扩展默认的布局，或在 layout 目录下创建自定义的布局。
默认布局：可通过添加 layouts/default.vue 文件来扩展应用的默认布局。
提示: 别忘了在布局文件中添加 组件用于显示页面的主体内容。

	<template>
  <nuxt/>
</template>

自定义布局：layouts 目录中的每个文件 (顶级) 都将创建一个可通过页面组件中的 layout 属性访问的自定义布局。

假设我们要创建一个 博客布局 并将其保存到layouts/blog.vue:

<template>
  <div>
    <div>我的博客导航栏在这里</div>
    <nuxt/>
  </div>
</template>

然后我们必须告诉页面 (即pages/posts.vue) 使用您的自定义布局：

<template>
<!-- Your template -->
</template>
<script>
export default {
  layout: 'blog'
  // page component definitions
}
</script>

错误页面：你可以通过编辑 layouts/error.vue 文件来定制化错误页面.
警告: 虽然此文件放在 layouts 文件夹中, 但应该将它看作是一个 页面(page).
这个布局文件不需要包含 标签。你可以把这个布局文件当成是显示应用错误（404，500等）的组件。
举一个个性化错误页面的例子 layouts/error.vue:

<template>
  <div class="container">
    <h1 v-if="error.statusCode === 404">页面不存在</h1>
    <h1 v-else>应用发生错误异常</h1>
    <nuxt-link to="/">首 页</nuxt-link>
  </div>
</template>

<script>
export default {
  props: ['error'],
  layout: 'blog' // 你可以为错误页面指定自定义的布局
}
</script>

插件：Nuxt.js允许您在运行Vue.js应用程序之前执行js插件。这在您需要使用自己的库或第三方模块时特别有用。

发送请求：如果初始化项目时加载了axios模块就可以参考https://axios.nuxtjs.org/文档（这是经过nuxt包装后的axios比较方便）

• 方法一

1、安装：npm install @nuxtjs/axios -d

2、配置 nuxt.config.js
 exports default {
  modules: [
    '@nuxtjs/axios',
  ]
}
3、在提供的context(上下文对象)中取得$axios
async asyncData({ $axios }) {
  const ip = await $axios.$get('...')
  return { ip }
}
created(){
this.$axios.$get('...')
}
4.使用Nuxt plugin扩展Axios
nuxt会在vue.js程序启动前调用 plugins目录下的脚本，并且以context(上下文对象)作为参数，可以取到$axios
======创建 plugins/axios.js 并定义axios的拦截器，定义请求的各个阶段需要进行的处理======
export default function({ $axios, redirect }) {
  // request interceptor
  $axios.interceptors.request.use(
    config => {
      // do something before request is sent
      return config
    },
    error => {
      // do something with request error
      return Promise.reject(error)
    }
  )
  $axios.onRequest(config => {
    console.log('Making request to ' + config.url)
  })

  // response interceptor
  $axios.interceptors.response.use(
    /**
     * Determine the request status by custom code
     * Here is just an example
     * You can also judge the status by HTTP Status Code
     */
    response => {
      const res = response.data
      if (res.code === 20000) {
        return res
      } else {
        redirect('/404')
        // if the custom code is not 200, it is judged as an error.
      }
      return Promise.reject(new Error(res.msg || 'Error'))
    },
    error => {
      console.log('err' + error) // for debug

      return Promise.reject(error)
    }
  )

  $axios.onError(error => {
    const code = parseInt(error.response && error.response.status)
    if (code === 400) {
      redirect('/404')
    } else if (code === 500) {
      redirect('/500')
    }
  })
}
5、添加插件到nuxt.config.js配置文件

plugins: [
    '@/plugins/axios'
],

• 方法二：直接引入axios，并模块化请求，就像vue中那样使用

1、安装：npm install axios --save
2、创建Axios扩展request.js

在/api/request.js主要做了3件事：

• 创建axios实例
• 增加request拦截器,在请求发出前做自定义处理,比如加上token,sessionID
• 增加response拦截器,收到响应信息后判断响应状态,如果出错可以使用Message组件提示

PS：在AsyncData方法中调用时，在服务器端执行，没有UI，所以无法进行UI展示提示。所以需要通过process.server变量判断当前环境是不是服务器。


/**
 * 封装Axios
 * 处理请求、响应错误信息
 */
import { Message } from 'element-ui'  //引用饿了么UI消息组件
import axios from 'axios' //引用axios

// create an axios instance
const service = axios.create({
  baseURL: '/api/', // 所有异步请求都加上/api,nginx转发到后端Springboot
  withCredentials: true, // send cookies when cross-domain requests
  timeout: 5000 // request timeout
})

// request interceptor
service.interceptors.request.use(
  config => {
    // do something before request is sent
    // config.headers['-Token'] = getToken()
    return config
  },
  error => {
    // do something with request error
    console.log(error) // for debug
    return Promise.reject(error)
  }
)

// response interceptor
service.interceptors.response.use(
  /**
   * If you want to get http information such as headers or status
   * Please return  response => response
   */

  /**
   * Determine the request status by custom code
   * Here is just an example
   * You can also judge the status by HTTP Status Code
   */
  response => {
    const res = response.data //res is my own data

    if (res.code === 20000) {
    // do somethings when response success
    //   Message({
    //     message: res.message || '操作成功',
    //     type: 'success',
    //     duration: 1 * 1000
    //   })
      return res
    } else {
      // if the custom code is not 200000, it is judged as an error.
      Message({
        message: res.msg || 'Error',
        type: 'error',
        duration: 2 * 1000
      })
      return Promise.reject(new Error(res.msg || 'Error'))
    }
  },
  error => {
    console.log('err' + error) // for debug
    Message({
      message: error.message,
      type: 'error',
      duration: 5 * 1000
    })
    return Promise.reject(error)
  }
)

export default service //导出封装后的axios


3、创建API接口文件

　　创建API接口文件，抽出所有模块的异步请求，将同模块的请求写在一起，将ajax请求和页面隔离，如果后端API调整，只需要修改对应接口文件

import request from './request'

/**
 * 获取博客详情
 * @param id 博客ID
 */
export function getBlog(id) {
  return request({
    url: 'blog/detail/' + id,
    method: 'get'
  })
}
/**
* 获取博客列表
* @param page 页码
* @param max 每页显示数量
*/
export function getList(page, max) {
  return request({
    url: 'blog/list',
    method: 'get',
    params: { page, max }
  })
}

4、vue组件使用
import { getBlog} from '~/api/blog'

 asyncData({ params, redirect}) {
    return getBlog(params.id) //直接使用API导出的方法进行请求
      .then(({ data }) => {
        return { blog: data }
      }).catch((e) => {  //从nuxt context 中获取 redirect 进行跳转
        redirect('/404')
      })
  }

参考 ：
文章
文章
文章

发布：npm run generate和npm run build 发布是有区别的

参考文章
参考文章
参考文章
参考文章
参考文章