淺談NUXT - 基於vue.js的服務端渲染框架

Vue因其簡單易懂的API、高效的數據綁定和靈活的組件系統，受到不少前端開發人員的青睞。國內不少公司都在使用vue進行項目開發，咱們正在使用的簡書，即是基於Vue來構建的。

咱們知道，SPA前端渲染存在兩大痛點：（1）SEO。搜索引擎爬蟲難以抓取客戶端渲染的頁面meta信息和其餘SEO相關信息，使網站沒法在搜索引擎中被用戶搜索到。（2）用戶體驗。大型webApp打包以後的js會很龐大，因而就有了按模塊加載，像require.js同樣，異步請求。webpack盛行，就變成了代碼分割。即使如此，受制於用戶設備，頁面初次渲染仍是有可能很慢，白屏等待時間太長，對日益挑剔的用戶羣體來講，沒法接受。

所以，對於那些展現宣傳型頁面，如官網，必須進行服務端渲染（SSR）。

Vue官方SSR文檔的配置太過繁瑣，須要對node和webpack有至關不錯的使用經驗，對於一個前端小白而言，官方推薦NUXT。

NUXT是一款基於vue的服務端渲染框架，跟React的NEXT殊途同歸。暫時的版本是0.10.6，其github主頁顯示很快就會發布1.0版。

$ vue init nuxt/starter <project-name> //nuxt快速啓動模版

$ cd <project-name> //進入目錄

$ npm install //安裝依賴

$ npm run dev //運行

瀏覽器打開localhost:3000便可。

目錄結構
pages文件夾：nuxt會自動將pages文件夾內的*.vue文件根據路徑到對應路由。默認是index.vue。咱們無需爲了路由劃分而煩惱，你只須要按照對應的文件夾層級建立 .vue 文件就行。Nuxtjs 會監聽pages文件夾下全部文件，當有文件變更時，瀏覽器對應的頁面也會自動刷新，這極大的簡化了咱們開發的步驟。

配置文件
目錄下的nuxt.config.js是咱們惟一的配置入口，能夠覆蓋nuxt的默認配置。nuxt.config.js 的所有的配置以下:

cache：該配置項讓你開啓組件緩存策略以提高渲染性能。

loading：該配置項用於個性化定製 Nuxt.js 使用的加載組件。

css：該配置項用於定義應用的全局（全部頁面均需引用的）樣式文件、模塊或第三方庫。

plugins：該配置項用於配置那些須要在根vue.js應用實例化以前須要運行的 Javascript 插件。

head：這裏能夠寫入頁面的meta信息

build：容許你在自動生成的vendor.bundle.js文件中添加一些模塊，以減小應用 bundle 的體積

dev ：該配置項用於配置 Nuxt.js 應用是開發仍是生產模式。

env ：該配置項用於定義應用客戶端和服務端的環境變量。

generate：該配置項用於定義每一個動態路由的參數。

rootDir ：該配置項用於配置 Next.js 應用的根目錄。

srcDir：該配置項用於配置應用的源碼目錄路徑。

transition：該配置項用於個性化配置應用過渡效果屬性的默認值。

vuex：Nuxt.js 會嘗試找到應用根目錄下的store目錄，若是該目錄存在，它將作如下的事情：引用vuex模塊，將vuex模塊 加到 vendors 構建配置中去，設置Vue根實例的store配置項。

這些內容均可以在官網上找到，建議詳細閱讀官網文檔及github倉庫。

爲何選擇使用NUXT作SSR？

1.配置很是簡單：咱們只需關注前端內容，不須要對服務端的內容瞭解不少就能夠完成服務端渲染。

2.文檔友好：開發文檔通熟易懂，很是詳細，內容完善。

3.無需考慮數據傳輸問題，nuxt 會在模板輸出以前異步請求數據（須要引入 axios 庫），並且對 vuex 有進一步的封裝

4.內置了 webpack，省去了配置 webpack 的步驟，nuxt 會根據配置打包對應的文件。

5.不用寫路由，自動根據目錄結構生成路由。

小結

框架自己還有不少地方須要優化，因此也只能踩一個坑補一個坑，有時間要多看看源碼，改源碼。

NUXT目前來說在大型項目中應用較少，只是比較適用於輕量級的，偏展現型的網站。