資訊專欄INFORMATION COLUMN
摘要：是一款基于的服務端渲染框架，跟的異曲同工。該配置項用于定義應用客戶端和服務端的環境變量。
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
$ cd
$ 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目前來講在大型項目中應用較少，只是比較適用于輕量級的，偏展示型的網站。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/51090.html
摘要：是一款基于的服務端渲染框架，跟的異曲同工。該配置項用于定義應用客戶端和服務端的環境變量。 Vue因其簡單易懂的API、高效的數據綁定和靈活的組件系統，受到很多前端開發人員的青睞。國內很多公司都在使用vue進行項目開發，我們正在使用的簡書，便是基于Vue來構建的。 我們知道，SPA前端渲染存在兩大痛點：（1）SEO。搜索引擎爬蟲難以抓取客戶端渲染的頁面meta信息和其他SEO相關信息，使...
摘要：公司的招聘要求都提到了至少熟悉其中一種前端框架，有前端工程化與模塊化開發實踐經驗相關字眼。我們主要從端公眾號移動端小程序三大平臺進行前端的技術選型，并來說說選其技術的幾大優勢。技術的優勢互聯網前端大潮后，前端出現了大框架，分別是與。 1、技術選型的背景前端技術發展日新月異，互聯網上出現的新型框架也比較多，如何讓新招聘的人員...
摘要：為了解決問題，推出了服務端預渲染，以便提高對優化。應用，到了，單頁面應用優秀的用戶體驗，逐漸成為了主流，頁面整體式渲染出來的，稱之為客戶端渲染?？蛻舳私邮諗祿缓笸瓿勺罱K渲染。通過對客戶端服務端基礎框架的抽象組織，主要關注的是應用的渲染。 現在前端開發一般都是前后端分離，mvvm和mvc的開發框架，如Angular、React和Vue等，雖然寫框架能夠使我們快速的完成開發，但是由于前...
摘要：原文鏈接開發一個單頁面應用，相信很多前端工程師都已經學會了，但是單頁面應用有一個致命的缺點，就是極不友好?；谒?，我們可以快速開發一個基于的單頁面應用。只有數據流存在相關配置時可用。引入后，所有頁面均有效。 原文鏈接 Vue 開發一個單頁面應用，相信很多前端工程師都已經學會了，但是單頁面應用有一個致命的缺點，就是 SEO 極不友好。除非，vue 能在服務端渲染（ssr）并直接返回已經渲...
閱讀 2136·2023-04-26 00:23
閱讀 807·2021-09-08 09:45
閱讀 2435·2019-08-28 18:20
閱讀 2542·2019-08-26 13:51
閱讀 1595·2019-08-26 10:32
閱讀 1392·2019-08-26 10:24
閱讀 2026·2019-08-26 10:23
閱讀 2196·2019-08-23 18:10
