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': ''
      }
    }
  }
}