Vue.js學習系列七——Vue服務器渲染Nuxt學習

時間 2019-11-07

標籤 vue.js vue 學習系列服務器渲染 nuxt 欄目 JavaScript 简体版

原文原文鏈接

我又回來啦~此次咱們來學習Vue的服務器渲染SSR。

關於SSR的文章網上不少，一開始看得我雲裏霧裏。而後去Vue.js 服務器渲染指南和nuxt官網看了看，發現文章大多都是搬運官網的內容，真正講的清晰明瞭的不多。因此想寫篇文章學習下SSR，但願可以幫助你們快速理解Vue SSR。css

什麼是SSR？

SSR，即服務器渲染，就是在服務器端將對Vue頁面進行渲染生成html文件，將html頁面傳給瀏覽器。
優勢：html

SEO 不一樣於SPA的HTML只有一個無實際內容的HTML和一個app.js，SSR生成的HTML是有內容的，這讓搜索引擎可以索引到頁面內容。
更快內容到達時間傳統的SPA應用是將bundle.js從服務器獲取，而後在客戶端解析並掛載到dom。而SSR直接將HTML字符串傳遞給瀏覽器。大大加快了首屏加載時間。

能夠從下面兩張圖來看，第一張圖是SSR生成的HTML頁面，第二種是傳統SPA生成的HTML頁面。

前端

Nuxt.js

我看了官方 SSR 的介紹，也看了 Nuxt.js 的文檔。本質上來講 SSR 是node後端的操做行爲，做爲只想好好寫前端代碼的我，不想太折騰。而 Nuxt.js 很是完美地整合了 SSR 的功能。讓咱們能夠開箱即用~官方也推薦使用 Nuxt.js 來搭建 SSR 項目。vue

好處

我以爲 Nuxt.js 相比本身寫 SSR 有幾點好處。node

無需配置Webpack：我一開始還在找Webpack配置呢，看了文檔知道nuxt都幫咱們封裝好了。如需修改Webpack配置只需修改nuxt.config.js 文件。
無需node知識：只要你會寫vue前端，你就能夠寫出SSR。無需知道SSR和node、express的配置方法（不過如今的前端多少都會點node知識~）。
整合了vue全家桶，直接可用。方便程度不亞於 vue-cli：安裝Nuxt——寫組件——編譯並啓動服務———看效果。就這麼簡單。
配置簡單，文檔友好：認真看下 Nuxt.js 文檔就會發現涵蓋的內容並很少，而功能很全，很是適合入手。

安裝

安裝方法在此。很簡單，生成模板，而後npm安裝依賴，最後再運行。
簡單搬運下步驟吧。ios

// vue-cli 建立nuxt模板項目
$ vue init nuxt-community/starter-template <project-name>
// 安裝依賴項
$ cd <project-name>
$ npm install
// 編譯並啓動服務
$ npm run dev
// 打開 http://localhost:3000

安裝遇到的問題：
因爲 Nuxt.js 中使用了 async...await 語法，而低版本的 node 不支持這個語法，因此必須升級 node 到 7.0 版本之上~
而後建議不要使用cnpm，我用cnpm安裝運行老報錯，感受有坑。git

目錄結構

Nuxt.js 花了很大的篇幅講它的目錄結構，其實瞭解了目錄結構就瞭解了 Nuxt.js 的大概。Nuxt.js 幫咱們配置好了全部東西，咱們只須要按照它的要求在相應目錄下建立文件寫代碼便可。github

assets 須要編譯的資源文件，如 JavaScript、SASS、LESS 等。
static 不須要編譯的靜態資源文件，如圖片資源。
components 顧名思義，存放 *.vue 組件的地方。常規 vue 組件寫法。
layouts 佈局目錄，設置佈局的地方，其中 <nuxt/> 標籤是咱們寫的頁面內容。可用做添加導航欄、底部欄等截面。
middleware 中間件目錄，所謂中間件，就是在頁面與頁面跳轉中執行的函數方法。如頁面跳轉時驗證用戶信息操做。
pages 頁面目錄。重點來了~這就是咱們存放展現頁面的地方。該目錄下的文件會轉換成相應的路由路徑供瀏覽器訪問。另外呢，該目錄下的 *.vue 頁面文件中 Nuxt.js 提供了一些特殊的方法用於處理服務器渲染中的事件。具體關於路由和特殊方法列舉在下面了。vue-router
- pages 路由
- 頁面組件的簡單介紹，具體特殊配置項的用法請查閱API。
plugins 插件目錄，像 mint-ui 這種第三方插件就放在這裏啦~具體用法看這裏。
store vuex 狀態管理器目錄，若是該目錄是空的， Nuxt.js 將不啓用 vuex。當咱們在該文件夾下建立 index.js 文件後便可使用 vuex 狀態管理器。用法在此！
nuxt.config.js 該文件是 Nuxt.js 的惟一配置項，以前提過 Nuxt.js 將 Webpack 等一衆配置都封裝好了，因此若是須要特殊配置，只須要修改該文件來覆蓋默認配置便可。具體配置參數請查閱API。
package.json 不解釋……

Demo演示

好消息，VueStudyDemos又更新啦！歡迎Star~本文Demo已收入到VueStudyDemos中。
下面咱們來簡單實現下各文件夾所提到的功能。vuex

資源加載

我在 assets 文件夾下添加了 font-awesome 字體庫，在 static 文件夾中放了張 Vue 的 logo 圖片。而後對資源進行調用。

<i class="fa fa-address-book" aria-hidden="true"></i>
<img src="~/static/logo.png" />

這裏須要將 font-awesome 的 css 變爲全局 css，避免每一個用到的頁面中都 import 字體庫的css。因此咱們在 nuxt.config.js 中添加以下配置。

module.exports = {
  ...
  css: [
    '~/assets/font-awesome/css/font-awesome.min.css'
  ],
  ...
}

組件定義

組件存放在 components 文件夾下，這個咱們講目錄的時候提到過。組件的用法和經常使用 vue 組件用法一致。
定義組件 Avatar，而後在 Page 頁面中使用。

<template>
  <avatar/>
</template>
<script>
import avatar from '~/components/Avatar'
export default {
    ...
    components: {
        avatar
    }
};
</script>

佈局

在 layouts 目錄中，default 是默認佈局。咱們能夠修改默認佈局也能夠新建佈局來使用。
在佈局文件中 </nuxt> 標籤是咱們要服務器渲染的區域。
下面咱們來建立個佈局玩玩。

// layouts/page.vue
<template>
<div>
    <mt-header fixed title="標題2"></mt-header>
    <nuxt/>
</div>
</template>

而後咱們來使用佈局，在 pages 頁面中配置 layout 選項（若是不配置默認就是 default）。

export default {
    ...
    layout: 'page'  // 默認是 'default'
};

中間件

所謂中間件，就是在兩個頁面跳轉之間執行的行爲。好比我定義一箇中間件 add.js

export default function ({ store }) {
    store.commit('increment')
}

而後在 nuxt.config.js 中進行配置：

module.exports = {
  ...
  router: {
    middleware: 'add'
  },
  ...
}

這樣，在每次頁面跳轉的時候都會執行一次中間件方法了。固然，也能夠單獨定義某個頁面的中間件，具體看官網啦~

頁面

頁面，就是在pages目錄下的 *.vue 文件，Nuxt.js 將目錄結構配置爲 vue-router 路由系統，因此咱們能夠直接經過文件名來訪問到相應頁面（先不提特殊路由）。
好比 pages/app.vue 文件就能夠經過 http://localhost:3000/app 來進行訪問。
注意：頁面組件寫法與經常使用 Vue 組件寫法相同，但 Nuxt.js 還提供了一些特殊配置項來配置服務器渲染過程當中的行爲。具體有啥配置請看頁面文檔。

路由

路由就是使 pages 目錄可以直接訪問的緣由。Nuxt.js 很是巧妙地使用目錄結構和文件名稱將 vue-router 的各類用法都涵蓋進去了。如動態路由、嵌套路由等。具體可參考文檔。也能夠看看demo的 pages 目錄。

插件

對於前端項目，插件的使用固然是必不可少的。官網上對這方面講的很清楚。我貼一下 demo 中的用法。這裏用的是 mint-ui 庫。

// plugins/mint-ui.js
import Vue from 'vue'
import MintUI from 'mint-ui'
import 'mint-ui/lib/style.css'

Vue.use(MintUI)

// nuxt.config.js
module.exports = {
  build: {
    vendor: ['mint-ui']
  },
  plugins: [
    '~plugins/mint-ui'
  ]
}

這樣就可使用第三方庫 mint-ui 啦！

<template>
  <div>
    <mt-navbar v-model="selected">
        <mt-tab-item id="1">選項一</mt-tab-item>
        <mt-tab-item id="2">選項二</mt-tab-item>
        <mt-tab-item id="3">選項三</mt-tab-item>
    </mt-navbar>

    <!-- tab-container -->
    <mt-tab-container v-model="selected">
        <mt-tab-container-item id="1">
            <mt-cell v-for="n in 10" :key="n" :title="'內容 ' + n" />
        </mt-tab-container-item>
        <mt-tab-container-item id="2">
            <mt-cell v-for="n in 4" :key="n" :title="'測試 ' + n" />
        </mt-tab-container-item>
        <mt-tab-container-item id="3">
            <mt-cell v-for="n in 6" :key="n" :title="'選項 ' + n" />
        </mt-tab-container-item>
    </mt-tab-container>
  </div>
</template>