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

近期我司開始了一個新項目，由於上一個項目完成的差很少了，因此將這個項目交給了我（其實就是我先踩踩坑，後續你們在一塊兒開發）。由於客戶要求要作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文件裏面是我本身配置的一些假數據。（這些數據簡直不忍直視 -。- 你們湊合着看吧）

最後給你們附上個人項目地址（一個簡單到爆的項目，歡迎你們的吐槽 🐶）