Vue伺服器渲染Nuxt學習筆記，vuenuxt學習筆記

Vue伺服器渲染Nuxt學習筆記，vuenuxt學習筆記

關於SSR的文章網上很多，一開始看得我雲裡霧裡。然後去Vue.js 伺服器渲染指南和nuxt官網看了看，發現文章大多都是搬運官網的內容，真正講的清晰明了的很少。所以想寫篇文章學習下SSR，希望能夠協助大家快速理解Vue SSR。

什麼是SSR？

SSR，即伺服器渲染，就是在伺服器端將對Vue頁面進行渲染產生html檔案，將html頁面傳給瀏覽器。 優點：

1. SEO 不同於SPA的HTML只有一個無實際內容的HTML和一個app.js，SSR產生的HTML是有內容的，這讓搜尋引擎能夠索引到頁面內容。
2. 更快內容到達時間 傳統的SPA應用是將bundle.js從伺服器擷取，然後在用戶端解析並掛載到dom。而SSR直接將HTML字串傳遞給瀏覽器。大大加快了首屏載入時間。

可以從下面兩張圖來看，第一張圖是SSR產生的HTML頁面，第二種是傳統SPA產生的HTML頁面。

SSR

SPA

Nuxt.js

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

好處

我覺得 Nuxt.js 相比自己寫 SSR 有幾點好處。

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

安裝

安裝方法在此。很簡單，產生模板，然後npm安裝依賴，最後再運行。

簡單搬運下步驟吧。

// 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安裝運行老報錯，感覺有坑。

目錄結構

Nuxt.js 花了很大的篇幅講它的目錄結構，其實瞭解了目錄結構就瞭解了 Nuxt.js 的大概。Nuxt.js 幫我們配置好了所有東西，我們只需要按照它的要求在相應目錄下建立檔案寫代碼即可。

1. assets 需要編譯的資源檔，如 JavaScript、SASS、LESS 等。
2. static 不需要編譯的靜態資源檔案，片資源。
3. components 顧名思義，存放 *.vue 組件的地方。常規 vue 組件寫法。
4. layouts 布局目錄，設定布局的地方，其中 <nuxt/> 標籤是我們寫的頁面內容。可用作添加導覽列、底部欄等截面。
5. middleware 中介軟體目錄，所謂中介軟體，就是在頁面與頁面跳轉中執行的函數方法。如頁面跳轉時驗證使用者資訊操作。
6. pages 頁面目錄。重點來了~這就是我們存放展示頁面的地方。該目錄下的檔案會轉換成相應的路由路徑供瀏覽器訪問。另外呢，該目錄下的 *.vue 分頁檔中 Nuxt.js 提供了一些特殊的方法用於處理伺服器渲染中的事件。具體關於路由和特殊方法列舉在下面了。
   1. pages 路由
   2. 頁面組件的簡單介紹，具體特殊配置項的用法請查閱API。
7. plugins 外掛程式目錄，像 mint-ui 這種第三方外掛程式就放在這裡啦~具體用法看這裡。
8. store vuex 狀態管理器目錄，如果該目錄是空的， Nuxt.js 將不啟用 vuex。當我們在該檔案夾下建立 index.js 檔案後即可使用 vuex 狀態管理器。用法在此！
9. nuxt.config.js 該檔案是 Nuxt.js 的唯一配置項，之前提過 Nuxt.js 將 Webpack 等一眾配置都封裝好了，所以如果需要特殊配置，只需要修改該檔案來覆蓋預設配置即可。具體配置參數請查閱API。
10. package.json 不解釋……

Demo示範

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

下面我們來簡單實現下各檔案夾所提到的功能。

資源載入

我在 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.jsimport Vue from 'vue'import MintUI from 'mint-ui'import 'mint-ui/lib/style.css'Vue.use(MintUI)

// nuxt.config.jsmodule.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>

vuex

對於 vuex，用法有兩種：普通方式和模組方式，用法和我們常用的 vuex 一樣。我的demo中是直接複製官網的代碼。

需要注意的是，vuex 的資料會存在context對象中，我們可以通過context對象擷取狀態資料。

發布

發布有兩種方式伺服器應用渲染部署和靜態部署，發布方式看這裡

最後

去看 Nuxt.js 的 API，會發現 Nuxt.js 真的是高度封裝。對於 Nuxt.js 產生的模板項目，只有一些必要配置是需要我們去完成的。Nuxt.js 可以說是一個非常友好而強大的 SSR 架構了。

以上就是本文的全部內容，希望對大家的學習有所協助，也希望大家多多支援幫客之家。