Vue.js 是目前最火熱的前端框架之一，而 Nuxt.js 是針對 Vue.js 推出的服務(wù)端渲染框架，通過高度定制化的配置以及簡潔的 API，開發(fā)者可以快速進(jìn)行服務(wù)端渲染項(xiàng)目的開發(fā)，本文將對 Nuxt.js 框架做一個(gè)簡要介紹。

服務(wù)端渲染

服務(wù)端渲染（Server Side Render）并不是一個(gè)新的概念，在單頁應(yīng)用（SPA）還沒有流行起來的時(shí)候，頁面就是通過服務(wù)端渲染好，并傳遞給瀏覽器的。當(dāng)用戶需要訪問新的頁面時(shí)，需要再次請求服務(wù)器，返回新的頁面。

為了優(yōu)化體驗(yàn)，開發(fā)者們開始選擇采用 JavaScript 在前端完成渲染過程，用前后端分離的手段，使后端更專注于數(shù)據(jù)，而前端注重于處理展示，通過設(shè)計(jì)良好的 API 以及 Ajax 技術(shù)完成前后端的交互，jQuery、React.js、Vue.js、Angular.js 等框架應(yīng)運(yùn)而生。

這些框架給開發(fā)者帶來了巨大的便利，但是對于一些論壇、資訊網(wǎng)站、或是企業(yè)的官方網(wǎng)站來說，他們對 搜索引擎優(yōu)化（SEO） 有強(qiáng)烈的要求，而前端渲染技術(shù)是無法滿足他們的需求的。如果無法通過搜索引擎的搜索輸出自身的內(nèi)容，那么網(wǎng)站的價(jià)值就會(huì)大大受影響，要解決這類問題，還是要靠服務(wù)端渲染。

本文會(huì)介紹 Vue.js 的服務(wù)端渲染解決方案 Nuxt.js。Vue.js 推出后，其數(shù)據(jù)驅(qū)動(dòng)和組件化思想，以及簡潔易上手的特性給開發(fā)者帶來了巨大的便利，Vue.js 官方提供的 vue-server-renderer 可以用來進(jìn)行服務(wù)端渲染的工作，但是需要增加額外的工作量，開發(fā)體驗(yàn)仍有待提高，而 Nuxt.js 推出后，這個(gè)問題被很好的解決了。

Nuxt.js 簡介

Nuxt.js 是一個(gè)基于 Vue.js 的通用應(yīng)用框架，Nuxt.js 預(yù)設(shè)了利用 Vue.js 開發(fā)服務(wù)端渲染的應(yīng)用所需要的各種配置，并且可以一鍵生成靜態(tài)站點(diǎn)。同時(shí)，Nuxt.js 的熱加載機(jī)制可以使開發(fā)者非常便捷的進(jìn)行網(wǎng)站的開發(fā)。

Nuxt.js 于 2016 年 10 月 25 號發(fā)布，上線還不足一年，但是已經(jīng)受到了廣泛的好評，最新的穩(wěn)定版本是 0.10.7，目前仍在進(jìn)行 1.0 版本的內(nèi)測，Nuxt.js 社區(qū)也在逐步完善中，官網(wǎng)已經(jīng)支持了中文文檔。

簡單上手

Vue.js 的 vue-cli 工具可以很方便的讓我們使用現(xiàn)成的模板初始化 Vue.js 項(xiàng)目，而 Nuxt.js 團(tuán)隊(duì)已經(jīng)為我們提供了初始化 Nuxt.js 項(xiàng)目的模板，安裝 vue-cli 后，只需在命令行中輸入

vue init nuxt/starter <projectName>

即可完成項(xiàng)目的創(chuàng)建工作，然后進(jìn)入項(xiàng)目目錄中執(zhí)行以下命令:

npm installnpm run dev

Nuxt.js 會(huì)使用 3000 端口運(yùn)行服務(wù)，在瀏覽器中輸入 http://localhost:3000 就可以看到一個(gè)帶有 Nuxt.js 的 logo 的原始的頁面了。

完成了一個(gè)簡單的 Hello World 項(xiàng)目后，我們來進(jìn)一步研究 Nuxt.js。進(jìn)入 Nuxt.js 項(xiàng)目后，項(xiàng)目目錄如下：

下面簡要介紹一下各個(gè)目錄的作用：

.nuxt/ ：用于存放 Nuxt.js 的核心庫文件。例如，你可以在這個(gè)目錄下找到 server.js 文件，描述了 Nuxt.js 進(jìn)行服務(wù)端渲染的邏輯（參見下一段 “Nuxt.js 的渲染流程”）， router.js 文件包含一張自動(dòng)生成的路由表。

assets/ ：用于存放靜態(tài)資源，該目錄下的資源使用 Webpack 構(gòu)建。

components/ ：存放項(xiàng)目中的各種組件。注意，只有在這個(gè)目錄下的文件才能被稱為 組件 。

layouts/ ：創(chuàng)建自定義的頁面布局，可以在這個(gè)目錄下創(chuàng)建全局頁面的統(tǒng)一布局，或是錯(cuò)誤頁布局。如果需要在布局中渲染 pages 目錄中的路由頁面，需要在布局文件中加上 <nuxt /> 標(biāo)簽。

middleware/ ：放置自定義的中間件，會(huì)在加載組件之前調(diào)用。

pages/ ：在這個(gè)目錄下，Nuxt.js 會(huì)根據(jù)目錄的結(jié)構(gòu)生成 vue-router 路由，詳見下文。

plugins/ ：可以在這個(gè)目錄中放置自定義插件，在根 Vue 對象實(shí)例化之前運(yùn)行。例如，可以將項(xiàng)目中的埋點(diǎn)邏輯封裝成一個(gè)插件，放置在這個(gè)目錄中，并在 nuxt.config.js 中加載。

static/ ：不使用 Webpack 構(gòu)建的靜態(tài)資源，會(huì)映射到根路徑下，如 robots.txt

store/ ：存放 Vuex 狀態(tài)樹。

nuxt.config.js ：Nuxt.js 的配置文件，詳見下文。

Nuxt.js 的渲染流程

Nuxt.js 通過一系列構(gòu)建于 Vue.js 之上的方法進(jìn)行服務(wù)端渲染，具體流程如下:

調(diào)用 nuxtServerInit 方法

當(dāng)請求打入時(shí)，最先調(diào)用的即是 nuxtServerInit 方法，可以通過這個(gè)方法預(yù)先將服務(wù)器的數(shù)據(jù)保存，如已登錄的用戶信息等。另外，這個(gè)方法中也可以執(zhí)行異步操作，并等待數(shù)據(jù)解析后返回。

Middleware 層

經(jīng)過第一步后，請求會(huì)進(jìn)入 Middleware 層，在該層中有三步操作：

讀取 nuxt.config.js 中全局 middleware 字段的配置，并調(diào)用相應(yīng)的中間件方法 匹配并加載與請求相對應(yīng)的 layout 調(diào)用 layout 和 page 的中間件方法

調(diào)用 validate 方法

在這一步可以對請求參數(shù)進(jìn)行校驗(yàn)，或是對第一步中服務(wù)器下發(fā)的數(shù)據(jù)進(jìn)行校驗(yàn)，如果校驗(yàn)失敗，將拋出 404 頁面。

調(diào)用 fetch 及 asyncData 方法

這兩個(gè)方法都會(huì)在組件加載之前被調(diào)用，它們的職責(zé)各有不同， asyncData 用來異步的進(jìn)行組件數(shù)據(jù)的初始化工作，而 fetch 方法偏重于異步獲取數(shù)據(jù)后修改 Vuex 中的狀態(tài)。

我們在 Nuxt.js 的源碼 util.js 中可以看到以下方法：

export function applyAsyncData (Component, asyncData = {}) {
 const ComponentData = Component.options.data || noopData
 Component.options.data = function () {
  const data = ComponentData.call(this)
  return { ...data, ...asyncData }
 }
 if (Component._Ctor && Component._Ctor.options) {
  Component._Ctor.options.data = Component.options.data
 }
}

這個(gè)方法會(huì)在 asyncData 方法調(diào)用完畢后進(jìn)行調(diào)用，可以看到，組件從 asyncData 方法中獲取的數(shù)據(jù)會(huì)和組件原生的 data 方法獲取的數(shù)據(jù)做一次合并，最終仍然會(huì)在 data 方法中返回，所以得出， asyncData 方法其實(shí)是原生 data 方法的擴(kuò)展。

經(jīng)過以上四步后，接下來就是渲染組件的工作了，整個(gè)過程可以用下圖表示：

（圖片來源：Nuxt.js 官網(wǎng)）

如上文所述，在 .nuxt 目錄下，你可以找到 server.js 文件，這個(gè)文件封裝了 Nuxt.js 在服務(wù)端渲染的邏輯，包括一個(gè)完整的 Promise 對象的鏈?zhǔn)秸{(diào)用，從而完成上面描述的整個(gè)服務(wù)端渲染的步驟。

Nuxt.js 的一些使用技巧

nuxt.config.js 的配置

nuxt.config.js 是 Nuxt.js 的配置文件，可以通過針對一系列參數(shù)的設(shè)置來完成 Nuxt.js 項(xiàng)目的配置，可以在Nuxt.js 官網(wǎng) 找到針對這個(gè)文件的說明，下面舉例一些常用的配置：

head: 可以在這個(gè)配置項(xiàng)中配置全局的 head ，如定義網(wǎng)站的標(biāo)題、 meta ，引入第三方的 CSS、JavaScript 文件等：

head: {
   title: '百姓店鋪',
   meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { name: 'applicable-device', content: 'pc,mobile' },
   ],
   link: [
      { rel: 'stylesheet', type: 'text/css', href: 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'}
   ],
   script: [
      {src: 'https://code.jquery.com/jquery-3.1.1.min.js'},
      {src: 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js'}
   ]
 },

build: 這個(gè)配置項(xiàng)用來配置 Nuxt.js 項(xiàng)目的構(gòu)建規(guī)則，即 Webpack 的構(gòu)建配置，如通過 vendor 字段引入第三方模塊，通過 plugin 字段配置 Webpack 插件，通過 loaders 字段自定義 Webpack 加載器等。通常我們會(huì)在 build 的 vendor 字段中引入 axios 模塊，從而在項(xiàng)目中進(jìn)行 HTTP 請求（ axios 也是 Vue.js 官方推薦的 HTTP 請求框架）。

build: {
   vendor: ['core-js', 'axios'],
   loaders: [
     {
       test: /\.(scss|sass)$/,
       use: [{
         loader: "style-loader"
       }, {
         loader: "css-loader"
       }, {
         loader: "sass-loader"
       }]
     },
     {
       test: /\.(png|jpe?g|gif|svg)$/,
       loader: 'url-loader',
       query: {
         limit: 1000,
         name: 'img/[name].[hash:7].[ext]'
       }
     },
     {
       test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
       loader: 'url-loader',
       query: {
         limit: 1000,
         name: 'fonts/[name].[hash:7].[ext]'
       }
     }
   ]
 }

css: 在這個(gè)配置項(xiàng)中，引入全局的 CSS 文件，之后每個(gè)頁面都會(huì)被引入。

router: 可以在此配置路由的基本規(guī)則，以及進(jìn)行中間件的配置。例如，你可以創(chuàng)建一個(gè)用來獲取 User-Agent 的中間件，并在此加載。

loading: Nuxt.js 提供了一套頁面內(nèi)加載進(jìn)度指示組件，可以在此配置顏色，禁用，或是配置自定義的加載組件。

env: 可以在此配置用來在服務(wù)端和客戶端共享的全局變量。

目錄即路由

Nuxt.js 在 vue-router 之上定義了一套自動(dòng)化的生成規(guī)則，即依據(jù) pages 的目錄結(jié)構(gòu)生成。例如，我們有以下目錄結(jié)構(gòu)：

這個(gè)目錄下含有一個(gè)基礎(chǔ)路由（無參數(shù)）以及兩個(gè)動(dòng)態(tài)路由（帶參數(shù)），Nuxt.js 會(huì)生成如下的路由配置表（可以在 .nuxt 目錄下的 router.js 文件中找到）：

routes: [
  {
    path: "/",
    component: _abe13a78,
    name: "index"
  },
  {
    path: "/article/:id?",
    component: _48f202f2,
    name: "article-id"
  },
  {
    path: "/:page",
    component: _5ccbb43a,
    name: "page"
  }
]

對于 article-id 這個(gè)路由，路徑中帶有 :id? 參數(shù)，表明這是一個(gè)可選的路由，如果要將其設(shè)為必選，則必須在 article 的目錄下添加 index.vue 文件。

再看下面一個(gè)例子:

由于有同名文件和文件夾的存在，Nuxt.js 會(huì)為我們生成嵌套路由，生成的路由結(jié)構(gòu)如下，在使用時(shí)，需要增加 <nuxt-child /> 標(biāo)簽來顯示子視圖的內(nèi)容。

routes: [
  {
    path: "/article",
    component: _f930b330,
    children: [
      {
        path: "",
        component: _1430822a,
        name: "article"
      },
      {
        path: ":id",
        component: _339e8013,
        name: "article-id"
      }
    ]
  }
]

此外，Nuxt.js 還可以設(shè)置動(dòng)態(tài)嵌套路由，具體可參見Nuxt.js 的官方文檔。

總結(jié)

Nuxt.js 盡管是一個(gè)非常年輕的框架，目前也有很多待改進(jìn)的問題，但它的出現(xiàn)為 Vue.js 開發(fā)者搭建服務(wù)端渲染項(xiàng)目提供了巨大的便利，期待 Nuxt.js 1.0 版本發(fā)布后，能給我們帶來更多實(shí)用的新功能。

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

最新評論