資訊專欄INFORMATION COLUMN
摘要：是一款基于的服務(wù)端渲染框架，跟的異曲同工。該配置項用于定義應(yīng)用客戶端和服務(wù)端的環(huán)境變量。
Vue因其簡單易懂的API、高效的數(shù)據(jù)綁定和靈活的組件系統(tǒng)，受到很多前端開發(fā)人員的青睞。國內(nèi)很多公司都在使用vue進行項目開發(fā)，我們正在使用的簡書，便是基于Vue來構(gòu)建的。
我們知道，SPA前端渲染存在兩大痛點：（1）SEO。搜索引擎爬蟲難以抓取客戶端渲染的頁面meta信息和其他SEO相關(guān)信息，使網(wǎng)站無法在搜索引擎中被用戶搜索到。（2）用戶體驗。大型webApp打包之后的js會很龐大，于是就有了按模塊加載，像require.js一樣，異步請求。webpack盛行，就變成了代碼分割。即便如此，受制于用戶設(shè)備，頁面初次渲染還是有可能很慢，白屏等待時間太長，對日益挑剔的用戶群體來說，無法接受。
因此，對于那些展示宣傳型頁面，如官網(wǎng)，必須進行服務(wù)端渲染（SSR）。
Vue官方SSR文檔的配置太過繁瑣，需要對node和webpack有相當(dāng)不錯的使用經(jīng)驗，對于一個前端小白而言，官方推薦NUXT。
NUXT是一款基于vue的服務(wù)端渲染框架，跟React的NEXT異曲同工。暫時的版本是0.10.6，其github主頁顯示很快就會發(fā)布1.0版。
$ vue init nuxt/starter
$ cd
$ npm install //安裝依賴
$ npm run dev //運行
瀏覽器打開localhost:3000即可。
目錄結(jié)構(gòu)
pages文件夾：nuxt會自動將pages文件夾內(nèi)的*.vue文件根據(jù)路徑到對應(yīng)路由。默認是index.vue。我們無需為了路由劃分而煩惱，你只需要按照對應(yīng)的文件夾層級創(chuàng)建 .vue 文件就行。Nuxtjs 會監(jiān)聽pages文件夾下所有文件，當(dāng)有文件變動時，瀏覽器對應(yīng)的頁面也會自動刷新，這極大的簡化了我們開發(fā)的步驟。
配置文件
目錄下的nuxt.config.js是我們唯一的配置入口，可以覆蓋nuxt的默認配置。nuxt.config.js 的全部的配置如下:
cache：該配置項讓你開啟組件緩存策略以提升渲染性能。
loading：該配置項用于個性化定制 Nuxt.js 使用的加載組件。
css：該配置項用于定義應(yīng)用的全局（所有頁面均需引用的）樣式文件、模塊或第三方庫。
plugins：該配置項用于配置那些需要在根vue.js應(yīng)用實例化之前需要運行的 Javascript 插件。
head：這里可以寫入頁面的meta信息
build：允許你在自動生成的vendor.bundle.js文件中添加一些模塊，以減少應(yīng)用 bundle 的體積
dev ：該配置項用于配置 Nuxt.js 應(yīng)用是開發(fā)還是生產(chǎn)模式。
env ：該配置項用于定義應(yīng)用客戶端和服務(wù)端的環(huán)境變量。
generate：該配置項用于定義每個動態(tài)路由的參數(shù)。
rootDir ：該配置項用于配置 Next.js 應(yīng)用的根目錄。
srcDir：該配置項用于配置應(yīng)用的源碼目錄路徑。
transition：該配置項用于個性化配置應(yīng)用過渡效果屬性的默認值。
vuex：Nuxt.js 會嘗試找到應(yīng)用根目錄下的store目錄，如果該目錄存在，它將做以下的事情：引用vuex模塊，將vuex模塊 加到 vendors 構(gòu)建配置中去，設(shè)置Vue根實例的store配置項。
這些內(nèi)容都可以在官網(wǎng)上找到，建議詳細閱讀官網(wǎng)文檔及github倉庫。
為什么選擇使用NUXT做SSR？
1.配置非常簡單：我們只需關(guān)注前端內(nèi)容，不需要對服務(wù)端的內(nèi)容了解很多就可以完成服務(wù)端渲染。
2.文檔友好：開發(fā)文檔通熟易懂，非常詳細，內(nèi)容完善。
3.無需考慮數(shù)據(jù)傳輸問題，nuxt 會在模板輸出之前異步請求數(shù)據(jù)（需要引入 axios 庫），而且對 vuex 有進一步的封裝
4.內(nèi)置了 webpack，省去了配置 webpack 的步驟，nuxt 會根據(jù)配置打包對應(yīng)的文件。
5.不用寫路由，自動根據(jù)目錄結(jié)構(gòu)生成路由。
小結(jié)
框架本身還有很多地方需要優(yōu)化，所以也只能踩一個坑補一個坑，有時間要多看看源碼，改源碼。
NUXT目前來講在大型項目中應(yīng)用較少，只是比較適用于輕量級的，偏展示型的網(wǎng)站。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/51090.html
摘要：是一款基于的服務(wù)端渲染框架，跟的異曲同工。該配置項用于定義應(yīng)用客戶端和服務(wù)端的環(huán)境變量。 Vue因其簡單易懂的API、高效的數(shù)據(jù)綁定和靈活的組件系統(tǒng)，受到很多前端開發(fā)人員的青睞。國內(nèi)很多公司都在使用vue進行項目開發(fā)，我們正在使用的簡書，便是基于Vue來構(gòu)建的。 我們知道，SPA前端渲染存在兩大痛點：（1）SEO。搜索引擎爬蟲難以抓取客戶端渲染的頁面meta信息和其他SEO相關(guān)信息，使...
摘要：公司的招聘要求都提到了至少熟悉其中一種前端框架，有前端工程化與模塊化開發(fā)實踐經(jīng)驗相關(guān)字眼。我們主要從端公眾號移動端小程序三大平臺進行前端的技術(shù)選型，并來說說選其技術(shù)的幾大優(yōu)勢。技術(shù)的優(yōu)勢互聯(lián)網(wǎng)前端大潮后，前端出現(xiàn)了大框架，分別是與。 1、技術(shù)選型的背景前端技術(shù)發(fā)展日新月異，互聯(lián)網(wǎng)上出現(xiàn)的新型框架也比較多，如何讓新招聘的人員...
摘要：為了解決問題，推出了服務(wù)端預(yù)渲染，以便提高對優(yōu)化。應(yīng)用，到了，單頁面應(yīng)用優(yōu)秀的用戶體驗，逐漸成為了主流，頁面整體式渲染出來的，稱之為客戶端渲染?？蛻舳私邮諗?shù)據(jù)，然后完成最終渲染。通過對客戶端服務(wù)端基礎(chǔ)框架的抽象組織，主要關(guān)注的是應(yīng)用的渲染。 現(xiàn)在前端開發(fā)一般都是前后端分離，mvvm和mvc的開發(fā)框架，如Angular、React和Vue等，雖然寫框架能夠使我們快速的完成開發(fā)，但是由于前...
摘要：原文鏈接開發(fā)一個單頁面應(yīng)用，相信很多前端工程師都已經(jīng)學(xué)會了，但是單頁面應(yīng)用有一個致命的缺點，就是極不友好?；谒?，我們可以快速開發(fā)一個基于的單頁面應(yīng)用。只有數(shù)據(jù)流存在相關(guān)配置時可用。引入后，所有頁面均有效。 原文鏈接 Vue 開發(fā)一個單頁面應(yīng)用，相信很多前端工程師都已經(jīng)學(xué)會了，但是單頁面應(yīng)用有一個致命的缺點，就是 SEO 極不友好。除非，vue 能在服務(wù)端渲染（ssr）并直接返回已經(jīng)渲...
閱讀 2152·2023-04-26 00:23
閱讀 826·2021-09-08 09:45
閱讀 2446·2019-08-28 18:20
閱讀 2553·2019-08-26 13:51
閱讀 1606·2019-08-26 10:32
閱讀 1405·2019-08-26 10:24
閱讀 2041·2019-08-26 10:23
閱讀 2208·2019-08-23 18:10
