關於Vue服務端渲染（nuxt）的簡單學習

五角六芒星_發表於2017-10-13
Vue服務端UX

近期我司開始了一個新專案，因為上一個專案完成的差不多了，所以將這個專案交給了我（其實就是我先踩踩坑，後續大家在一起開發）。因為客戶要求要做SEO優化，所以一開始的決定是使用原聲js加jq做，我自己也花了倆三天時間來做了一個demo，但是老大覺得效果不理想，週一上午開會決定用服務端渲染的形式實現，說實話到現在我還不是特別的能夠理解這套框架的，但是還是想把自己這幾天遇到的問題，以及如何解決的跟大家一起分享一下（畢竟第一次在掘金上發表東西，歡迎大家吐槽 ---- >_< ）

Nuxt.js 是什麼？

Nuxt.js 是一個基於 Vue.js 的通用應用框架。

通過對客戶端/服務端基礎架構的抽象組織，Nuxt.js 主要關注的是應用的 UI渲染。

我們的目標是建立一個靈活的應用框架，你可以基於它初始化新專案的基礎結構程式碼，或者在已有 Node.js 專案中使用 Nuxt.js。

Nuxt.js 預設了利用Vue.js開發服務端渲染的應用所需要的各種配置。

除此之外，我們還提供了一種命令叫：nuxt generate，為基於 Vue.js 的應用提供生成對應的靜態站點的功能。

我們相信這個命令所提供的功能，是向開發整合各種微服務（miscroservices）的 Web 應用邁開的新一步。

作為框架，Nuxt.js 為 客戶端/服務端 這種典型的應用架構模式提供了許多有用的特性，例如非同步資料載入、中介軟體支援、佈局支援等。（官方說明-。- 建議大家在學習之前先將官方文件看一遍，大體有個瞭解然後再來進行實際操作）

安裝Nuxt

好了，不吡吡了其他沒用的了，下面開始正文；
使用Nuxt有兩種方式：
1.使用官方給的新手模版： 

$ vue init nuxt-community/starter-template <project-name>複製程式碼

project-name 是你建立的專案的名稱


$ cd <project-name>
$ npm install # Or yarn複製程式碼

進入你建立好的專案的資料夾下 ，然後安裝專案所需要的依賴；
建議使用yarn安裝依賴

$ npm run dev複製程式碼

執行啟動命令，啟動成功之後開啟瀏覽器輸入：http://localhost:3000 就可以看到你建立的專案了

2.如果不想使用官方推薦的哪種方式也可以自己手動配置一個（個人建議，新手上路還是使用官方推薦的那種方式）
首先新建一個資料夾

$ mkdir <專案名>
$ cd <專案名>複製程式碼

然後在你建立的資料夾下新建一個package.json檔案 該檔案用來配置如何執行nuxt：

{
  "name": "my-app",
  "scripts": {
    "dev": "nuxt"
  }
}複製程式碼

上面配置我們通過npm run dev來執行nuxt
安裝nuxt：

npm install --save nuxt複製程式碼

然後新建一個pages資料夾

$ mkdir pages複製程式碼

在pages資料夾下新建一個index.vue檔案（Nuxt.js 會依據 pages 目錄中的所有 *.vue 檔案生成應用的路由配置。）

<template>
  <h1>Hello Nuxt!</h1>
</template>複製程式碼

啟動專案

$ npm run dev複製程式碼

最後開啟瀏覽器訪問 http://localhost:3000 就像可以了

本文將的是使用官方給的模版進行搭建的專案（畢竟我還年輕-。-）

專案目錄結構

assets資料夾 用於組織未編譯的靜態資源如 LESS、SASS 或 JavaScript。
components資料夾 用於放置專案公用的元件。
config資料夾 一些基本配置，比如 env.js fetch.js等。
layouts資料夾 用於組織應用的佈局元件。
middleware資料夾 用於放置一些專案的中介軟體。
pages資料夾 用於組織應用的路由及檢視。Nuxt.js 框架讀取該目錄下所有的 .vue 檔案並自動生成對應的路由配置。
plugins 用於放置專案所用到的外掛，比如axios element-ui 等。
server 用於放置專案伺服器配置，比如配置express 或者你自己做的假資料等。
static 用於放置一些靜態檔案，並且這個資料夾下的資源是不會被nuxt使用webpack進行打包編譯的，伺服器啟動的時候，該目錄下的檔案會對映至應用的根路徑 / 下。
store 目錄用於組織應用的 Vuex 狀態樹 檔案。 Nuxt.js 框架整合了 Vuex 狀態樹 的相關功能配置，在 store 目錄下建立一個 index.js 檔案可啟用這些配置。
backpack.config.js是因為我專案中配置server使用的。
nuxt.config.js是nuxt相關的基礎配置。
其中需要重點了解的是nuxt.config.js，nuxt.js在專案的搭建的時候已經給你配置好了一些相關的基礎配置，當你的專案需要修改這些配置的時候，就需要在next.config.js進行操作了，他會將預設的配置進行覆蓋，已達到你專案中需要的效果。官方連結

路由

在使用nuxt.js的過程中你會發現你不需要進行路由的配置，只需要根據自己專案的需求將對應的檔案建在pages資料夾下就可以了，nuxt.js會根據這個檔案的目錄結構自行的進行路由的配置。

檢視

包括模版，頁面，佈局，html頭部

資料處理

Nuxt.js 擴充套件了 Vue.js，增加了一個叫 asyncData 的方法，使得我們可以在設定元件的資料之前能非同步獲取或處理資料。
你可以在你的頁面裡這樣配置：

async asyncData () {
    let { data } = await axios.get('/api/teacherList')
    return {
      teacherList: data.teacherList
    }
}複製程式碼

asyncData方法會在元件（限於頁面元件）每次載入之前被呼叫。它可以在服務端或路由更新之前被呼叫。（就是大家需要的服務端渲染 >_< ）

asyncData方法也具備錯誤處理的能力
Nuxt.js 在上下文物件context中提供了一個 error(params) 方法，你可以通過呼叫該方法來顯示錯誤資訊頁面。params.statusCode 可用於指定服務端返回的請求狀態碼。

以返回 Promise 的方式舉個例子：

export default {
  asyncData ({ params, error }) {
    return axios.get(`https://my-api/posts/${params.id}`)
    .then((res) => {
      return { title: res.data.title }
    })
    .catch((e) => {
      error({ statusCode: 404, message: 'Post not found' })
    })
  }
}複製程式碼

當然也可以通過回撥函式進行處理，這個文件將的也非常清楚

有同學可能會問，那如果我要是需要做資料互動怎麼辦，其實這個更簡單，就是跟大家平時做vue的專案是一樣的：

methods:{
    getMore (){
        axios.get('/api/messageList').then((res)=>{
            this.messageList = this.messageList.concat(res.data);
        })
    }
}複製程式碼

vuex

vuex的使用其實和平時的vue專案中使用vuex是類似的，如果你在vue中能夠熟練使用vuex，那麼在nuxt當中對於你來說也不會特別困難。這裡我就不給大家將vuex裡，我怕我越說大家可能與無法理解? （我理解的vuex就是一個可以當作全域性變數使用的一個東西，也有大佬將vuex比做是前端專案的資料庫 nuxt中使用vuex文件）

server

最後跟大家說一下我的server吧
index是我使用express的一些配置，便於我寫的假資料能夠進行正常的請求
api檔案裡面是我自己配置的一些假資料。（這些資料簡直不忍直視 -。- 大家湊合著看吧）

最後給大家附上我的專案地址（一個簡單到爆的專案，歡迎大家的吐槽 ?）

相關文章