nuxt.js和vue.js

nuxt.js是基于 Vue.js 创建的服务端渲染（ssr）应用框架。

一般使用nuxt.js多是用来解决seo的问题。

nuxt.js与vue.js的区别有：

　　路由：

　　　　　nuxt.js是按照pages文件夹的目录结构来自动生成路由。

　　　　　vue.js则是需要在router/index.js中手动配置路由。

　　入口页面：

　　　　　nuxt.js的入口页面是layout/default.vue。

　　　　　vue.js的入口页面为src/App.vue。

　　pack配置　　

　　　　　nuxt内置webpack，允许根据服务端需求，在 nuxt.config.js 中的build属性自定义构建webpack的配置，覆盖默认配置。

　　　　　vue关于webpack的配置存放在build文件夹下。

nuxt.js不一定一直运行在客户端（存储方面建议cookie），vue.js则是一直运行于客户端。

nuxt.js相比于vue.js优点在于  便于seo 和 更利于首屏加载。

生命周期：

nuxt.js对于vue.js的生命周期函数进行了一部分拓展。新增了

　　middleware(){}, // 服务端

　　validate() {}, // 服务端

　　asyncData() {}, // 服务端

　　fetch() {}, // store数据加载

　　beforeCreate() {}, // 服务端和客户端都会执行

　　created() {}, // 服务端和客户端都会执行

vue.js的生命周期钩子中只有beforeCreate(){}和created(){}会在浏览器和服务端均被调用，其他只有在浏览器端被调用

nuxt.js内置webpack，

路由：

nuxt根据pages目录结构生成路由配置，异步数据asyncData，必须要页面组件才能调用asyncData,asyncData传入context参数，可以获取一些信息

export default {
  asyncData(ctx){
    ctx.app   // 根实例
    ctx.route   // 路由实例
    ctx.params   // 路由参数
    ctx.query   // 路由问号后的参数
    ctx.error   // 错误处理方法
  }
}

使用这个方法时要注意，如果由于服务器或api错误导致无法渲染，就要做好容错机制，可以使用context.error方法

async asyncData(ctx){
  try {
    throw new Error()
  } catch {
    ctx.error( {statusCode: 500, message: '服务器开小差了~'} ) // 这里的statusCode参数必须是http状态码
  }
}

此时，错误页可以通过/layout/error.vue自定义

middleware()

在特定页面实战中间件使用axios请求数据

　　nuxt默认安装axios，所以只要安装proxy即可

npm install @nuxtjs/proxy

　　安装之后需要在nuxt.config.js中配置

export default {
  modules: [
    '@nuxtjs/axios',
    '@nuxtjs/proxy'
  ],
  proxy: {
    './api': {
      target: 'http://www.xxx.com',
      changeOrigin: true,
      pathRewrite: {
        '^/api': ''
      }
    }
  }
}