關(guān)于SSR的文章網(wǎng)上很多，一開始看得我云里霧里。然后去Vue.js 服務(wù)器渲染指南和nuxt官網(wǎng)看了看，發(fā)現(xiàn)文章大多都是搬運(yùn)官網(wǎng)的內(nèi)容，真正講的清晰明了的很少。所以想寫篇文章學(xué)習(xí)下SSR，希望能夠幫助大家快速理解Vue SSR。

什么是SSR？

SSR，即服務(wù)器渲染，就是在服務(wù)器端將對(duì)Vue頁面進(jìn)行渲染生成html文件，將html頁面?zhèn)鹘o瀏覽器。 優(yōu)點(diǎn)：

1. SEO 不同于SPA的HTML只有一個(gè)無實(shí)際內(nèi)容的HTML和一個(gè)app.js，SSR生成的HTML是有內(nèi)容的，這讓搜索引擎能夠索引到頁面內(nèi)容。
2. 更快內(nèi)容到達(dá)時(shí)間 傳統(tǒng)的SPA應(yīng)用是將bundle.js從服務(wù)器獲取，然后在客戶端解析并掛載到dom。而SSR直接將HTML字符串傳遞給瀏覽器。大大加快了首屏加載時(shí)間。

可以從下面兩張圖來看，第一張圖是SSR生成的HTML頁面，第二種是傳統(tǒng)SPA生成的HTML頁面。

SSR

SPA

Nuxt.js

我看了官方 SSR 的介紹，也看了 Nuxt.js 的文檔。本質(zhì)上來說 SSR 是node后端的操作行為，作為只想好好寫前端代碼的我，不想太折騰。而 Nuxt.js 非常完美地整合了 SSR 的功能。讓我們可以開箱即用~官方也推薦使用 Nuxt.js 來搭建 SSR 項(xiàng)目。

好處

我覺得 Nuxt.js 相比自己寫 SSR 有幾點(diǎn)好處。

1. 無需配置Webpack：我一開始還在找Webpack配置呢，看了文檔知道nuxt都幫我們封裝好了。如需修改Webpack配置只需修改nuxt.config.js 文件。
2. 無需node知識(shí)：只要你會(huì)寫vue前端，你就可以寫出SSR。無需知道SSR和node、express的配置方法（不過現(xiàn)在的前端多少都會(huì)點(diǎn)node知識(shí)~）。
3. 整合了vue全家桶，直接可用。方便程度不亞于 vue-cli：安裝Nuxt——寫組件——編譯并啟動(dòng)服務(wù)———看效果。就這么簡單。
4. 配置簡單，文檔友好：認(rèn)真看下 Nuxt.js 文檔就會(huì)發(fā)現(xiàn)涵蓋的內(nèi)容并不多，而功能很全，非常適合入手。

安裝

安裝方法在此。很簡單，生成模板，然后npm安裝依賴，最后再運(yùn)行。

簡單搬運(yùn)下步驟吧。

// vue-cli 創(chuàng)建nuxt模板項(xiàng)目
$ vue init nuxt-community/starter-template <project-name>
// 安裝依賴項(xiàng)
$ cd <project-name>
$ npm install
// 編譯并啟動(dòng)服務(wù)
$ npm run dev
// 打開 http://localhost:3000

安裝遇到的問題：

由于 Nuxt.js 中使用了 async...await 語法，而低版本的 node 不支持這個(gè)語法，所以必須升級(jí) node 到 7.0 版本之上~

然后建議不要使用cnpm，我用cnpm安裝運(yùn)行老報(bào)錯(cuò)，感覺有坑。

目錄結(jié)構(gòu)

Nuxt.js 花了很大的篇幅講它的目錄結(jié)構(gòu)，其實(shí)了解了目錄結(jié)構(gòu)就了解了 Nuxt.js 的大概。Nuxt.js 幫我們配置好了所有東西，我們只需要按照它的要求在相應(yīng)目錄下創(chuàng)建文件寫代碼即可。

1. assets 需要編譯的資源文件，如 JavaScript、SASS、LESS 等。
2. static 不需要編譯的靜態(tài)資源文件，如圖片資源。
3. components 顧名思義，存放 *.vue 組件的地方。常規(guī) vue 組件寫法。
4. layouts 布局目錄，設(shè)置布局的地方，其中 <nuxt/> 標(biāo)簽是我們寫的頁面內(nèi)容?？捎米魈砑訉?dǎo)航欄、底部欄等截面。
5. middleware 中間件目錄，所謂中間件，就是在頁面與頁面跳轉(zhuǎn)中執(zhí)行的函數(shù)方法。如頁面跳轉(zhuǎn)時(shí)驗(yàn)證用戶信息操作。
6. pages 頁面目錄。重點(diǎn)來了~這就是我們存放展示頁面的地方。該目錄下的文件會(huì)轉(zhuǎn)換成相應(yīng)的路由路徑供瀏覽器訪問。另外呢，該目錄下的 *.vue 頁面文件中 Nuxt.js 提供了一些特殊的方法用于處理服務(wù)器渲染中的事件。具體關(guān)于路由和特殊方法列舉在下面了。
   1. pages 路由
   2. 頁面組件的簡單介紹，具體特殊配置項(xiàng)的用法請(qǐng)查閱API。
7. plugins 插件目錄，像 mint-ui 這種第三方插件就放在這里啦~具體用法看這里。
8. store vuex 狀態(tài)管理器目錄，如果該目錄是空的， Nuxt.js 將不啟用 vuex。當(dāng)我們?cè)谠撐募A下創(chuàng)建 index.js 文件后即可使用 vuex 狀態(tài)管理器。用法在此！
9. nuxt.config.js 該文件是 Nuxt.js 的唯一配置項(xiàng)，之前提過 Nuxt.js 將 Webpack 等一眾配置都封裝好了，所以如果需要特殊配置，只需要修改該文件來覆蓋默認(rèn)配置即可。具體配置參數(shù)請(qǐng)查閱API。
10. package.json 不解釋……

Demo演示

好消息，VueStudyDemos又更新啦！歡迎Star~本文Demo已收入到VueStudyDemos中。

下面我們來簡單實(shí)現(xiàn)下各文件夾所提到的功能。

資源加載

我在 assets 文件夾下添加了 font-awesome 字體庫，在 static 文件夾中放了張 Vue 的 logo 圖片。然后對(duì)資源進(jìn)行調(diào)用。

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

這里需要將 font-awesome 的 css 變?yōu)槿?css，避免每個(gè)用到的頁面中都 import 字體庫的css。所以我們?cè)?nuxt.config.js 中添加如下配置。

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

組件定義

組件存放在 components 文件夾下，這個(gè)我們講目錄的時(shí)候提到過。組件的用法和常用 vue 組件用法一致。 定義組件 Avatar，然后在 Page 頁面中使用。

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

布局

在 layouts 目錄中，default 是默認(rèn)布局。我們可以修改默認(rèn)布局也可以新建布局來使用。

在布局文件中 </nuxt> 標(biāo)簽是我們要服務(wù)器渲染的區(qū)域。

下面我們來創(chuàng)建個(gè)布局玩玩。

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

然后我們來使用布局，在 pages 頁面中配置 layout 選項(xiàng)（如果不配置默認(rèn)就是 default）。

export default {
  ...
  layout: 'page' // 默認(rèn)是 'default'
};

中間件

所謂中間件，就是在兩個(gè)頁面跳轉(zhuǎn)之間執(zhí)行的行為。比如我定義一個(gè)中間件 add.js

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

然后在 nuxt.config.js 中進(jìn)行配置：

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

這樣，在每次頁面跳轉(zhuǎn)的時(shí)候都會(huì)執(zhí)行一次中間件方法了。當(dāng)然，也可以單獨(dú)定義某個(gè)頁面的中間件，具體看官網(wǎng)啦~

頁面

頁面，就是在pages目錄下的 *.vue 文件，Nuxt.js 將目錄結(jié)構(gòu)配置為 vue-router 路由系統(tǒng)，所以我們可以直接通過文件名來訪問到相應(yīng)頁面（先不提特殊路由）。

比如 pages/app.vue 文件就可以通過 http://localhost:3000/app 來進(jìn)行訪問。

注意：頁面組件寫法與常用 Vue 組件寫法相同，但 Nuxt.js 還提供了一些特殊配置項(xiàng)來配置服務(wù)器渲染過程中的行為。具體有啥配置請(qǐng)看 頁面文檔。

路由

路由就是使 pages 目錄能夠直接訪問的原因。Nuxt.js 非常巧妙地使用目錄結(jié)構(gòu)和文件名稱將 vue-router 的各種用法都涵蓋進(jìn)去了。如動(dòng)態(tài)路由、嵌套路由等。具體可參考文檔。也可以看看demo的 pages 目錄。

插件

對(duì)于前端項(xiàng)目，插件的使用當(dāng)然是必不可少的。官網(wǎng)上對(duì)這方面講的很清楚。我貼一下 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">選項(xiàng)一</mt-tab-item>
    <mt-tab-item id="2">選項(xiàng)二</mt-tab-item>
    <mt-tab-item id="3">選項(xiàng)三</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èi)容 ' + n" />
    </mt-tab-container-item>
    <mt-tab-container-item id="2">
      <mt-cell v-for="n in 4" :key="n" :title="'測(cè)試 ' + n" />
    </mt-tab-container-item>
    <mt-tab-container-item id="3">
      <mt-cell v-for="n in 6" :key="n" :title="'選項(xiàng) ' + n" />
    </mt-tab-container-item>
  </mt-tab-container>
 </div>
</template>

vuex

對(duì)于 vuex，用法有兩種：普通方式和模塊方式，用法和我們常用的 vuex 一樣。我的demo中是直接復(fù)制官網(wǎng)的代碼。

需要注意的是，vuex 的數(shù)據(jù)會(huì)存在context對(duì)象中，我們可以通過context對(duì)象獲取狀態(tài)數(shù)據(jù)。

發(fā)布

發(fā)布有兩種方式服務(wù)器應(yīng)用渲染部署和靜態(tài)部署，發(fā)布方式看這里

最后

去看 Nuxt.js 的 API，會(huì)發(fā)現(xiàn) Nuxt.js 真的是高度封裝。對(duì)于 Nuxt.js 生成的模板項(xiàng)目，只有一些必要配置是需要我們?nèi)ネ瓿傻?。Nuxt.js 可以說是一個(gè)非常友好而強(qiáng)大的 SSR 框架了。

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論