国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

淺談NUXT - 基于vue.js的服務(wù)端渲染框架

godiscoder / 3567人閱讀

摘要：是一款基于的服務(wù)端渲染框架，跟的異曲同工。該配置項(xiàng)用于定義應(yīng)用客戶端和服務(wù)端的環(huán)境變量。

Vue因其簡(jiǎn)單易懂的API、高效的數(shù)據(jù)綁定和靈活的組件系統(tǒng)，受到很多前端開發(fā)人員的青睞。國(guó)內(nèi)很多公司都在使用vue進(jìn)行項(xiàng)目開發(fā)，我們正在使用的簡(jiǎn)書，便是基于Vue來構(gòu)建的。

我們知道，SPA前端渲染存在兩大痛點(diǎn)：（1）SEO。搜索引擎爬蟲難以抓取客戶端渲染的頁面meta信息和其他SEO相關(guān)信息，使網(wǎng)站無法在搜索引擎中被用戶搜索到。（2）用戶體驗(yàn)。大型webApp打包之后的js會(huì)很龐大，于是就有了按模塊加載，像require.js一樣，異步請(qǐng)求。webpack盛行，就變成了代碼分割。即便如此，受制于用戶設(shè)備，頁面初次渲染還是有可能很慢，白屏等待時(shí)間太長(zhǎng)，對(duì)日益挑剔的用戶群體來說，無法接受。

因此，對(duì)于那些展示宣傳型頁面，如官網(wǎng)，必須進(jìn)行服務(wù)端渲染（SSR）。

Vue官方SSR文檔的配置太過繁瑣，需要對(duì)node和webpack有相當(dāng)不錯(cuò)的使用經(jīng)驗(yàn)，對(duì)于一個(gè)前端小白而言，官方推薦NUXT。

NUXT是一款基于vue的服務(wù)端渲染框架，跟React的NEXT異曲同工。暫時(shí)的版本是0.10.6，其github主頁顯示很快就會(huì)發(fā)布1.0版。

$ vue init nuxt/starter //nuxt快速啟動(dòng)模版

$ cd //進(jìn)入目錄

$ npm install //安裝依賴

$ npm run dev //運(yùn)行

瀏覽器打開localhost:3000即可。

目錄結(jié)構(gòu)
pages文件夾：nuxt會(huì)自動(dòng)將pages文件夾內(nèi)的*.vue文件根據(jù)路徑到對(duì)應(yīng)路由。默認(rèn)是index.vue。我們無需為了路由劃分而煩惱，你只需要按照對(duì)應(yīng)的文件夾層級(jí)創(chuàng)建 .vue 文件就行。Nuxtjs 會(huì)監(jiān)聽pages文件夾下所有文件，當(dāng)有文件變動(dòng)時(shí)，瀏覽器對(duì)應(yīng)的頁面也會(huì)自動(dòng)刷新，這極大的簡(jiǎn)化了我們開發(fā)的步驟。

配置文件
目錄下的nuxt.config.js是我們唯一的配置入口，可以覆蓋nuxt的默認(rèn)配置。nuxt.config.js 的全部的配置如下:

cache：該配置項(xiàng)讓你開啟組件緩存策略以提升渲染性能。

loading：該配置項(xiàng)用于個(gè)性化定制 Nuxt.js 使用的加載組件。

css：該配置項(xiàng)用于定義應(yīng)用的全局（所有頁面均需引用的）樣式文件、模塊或第三方庫(kù)。

plugins：該配置項(xiàng)用于配置那些需要在根vue.js應(yīng)用實(shí)例化之前需要運(yùn)行的 Javascript 插件。

head：這里可以寫入頁面的meta信息

build：允許你在自動(dòng)生成的vendor.bundle.js文件中添加一些模塊，以減少應(yīng)用 bundle 的體積

dev ：該配置項(xiàng)用于配置 Nuxt.js 應(yīng)用是開發(fā)還是生產(chǎn)模式。

env ：該配置項(xiàng)用于定義應(yīng)用客戶端和服務(wù)端的環(huán)境變量。

generate：該配置項(xiàng)用于定義每個(gè)動(dòng)態(tài)路由的參數(shù)。

rootDir ：該配置項(xiàng)用于配置 Next.js 應(yīng)用的根目錄。

srcDir：該配置項(xiàng)用于配置應(yīng)用的源碼目錄路徑。

transition：該配置項(xiàng)用于個(gè)性化配置應(yīng)用過渡效果屬性的默認(rèn)值。

vuex：Nuxt.js 會(huì)嘗試找到應(yīng)用根目錄下的store目錄，如果該目錄存在，它將做以下的事情：引用vuex模塊，將vuex模塊 加到 vendors 構(gòu)建配置中去，設(shè)置Vue根實(shí)例的store配置項(xiàng)。

這些內(nèi)容都可以在官網(wǎng)上找到，建議詳細(xì)閱讀官網(wǎng)文檔及github倉(cāng)庫(kù)。

為什么選擇使用NUXT做SSR？

1.配置非常簡(jiǎn)單：我們只需關(guān)注前端內(nèi)容，不需要對(duì)服務(wù)端的內(nèi)容了解很多就可以完成服務(wù)端渲染。

2.文檔友好：開發(fā)文檔通熟易懂，非常詳細(xì)，內(nèi)容完善。

3.無需考慮數(shù)據(jù)傳輸問題，nuxt 會(huì)在模板輸出之前異步請(qǐng)求數(shù)據(jù)（需要引入 axios 庫(kù)），而且對(duì) vuex 有進(jìn)一步的封裝

4.內(nèi)置了 webpack，省去了配置 webpack 的步驟，nuxt 會(huì)根據(jù)配置打包對(duì)應(yīng)的文件。

5.不用寫路由，自動(dòng)根據(jù)目錄結(jié)構(gòu)生成路由。

小結(jié)

框架本身還有很多地方需要優(yōu)化，所以也只能踩一個(gè)坑補(bǔ)一個(gè)坑，有時(shí)間要多看看源碼，改源碼。

NUXT目前來講在大型項(xiàng)目中應(yīng)用較少，只是比較適用于輕量級(jí)的，偏展示型的網(wǎng)站。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/84581.html

相關(guān)文章

  • 淺談NUXT - 基于vue.js的服務(wù)端渲染框架

    摘要：是一款基于的服務(wù)端渲染框架，跟的異曲同工。該配置項(xiàng)用于定義應(yīng)用客戶端和服務(wù)端的環(huán)境變量。 Vue因其簡(jiǎn)單易懂的API、高效的數(shù)據(jù)綁定和靈活的組件系統(tǒng)，受到很多前端開發(fā)人員的青睞。國(guó)內(nèi)很多公司都在使用vue進(jìn)行項(xiàng)目開發(fā)，我們正在使用的簡(jiǎn)書，便是基于Vue來構(gòu)建的。 我們知道，SPA前端渲染存在兩大痛點(diǎn)：（1）SEO。搜索引擎爬蟲難以抓取客戶端渲染的頁面meta信息和其他SEO相關(guān)信息，使...

    yearsj 評(píng)論0 收藏0

  • 珠峰前端架構(gòu)師培養(yǎng)計(jì)劃

    摘要：公司的招聘要求都提到了至少熟悉其中一種前端框架，有前端工程化與模塊化開發(fā)實(shí)踐經(jīng)驗(yàn)相關(guān)字眼。我們主要從端公眾號(hào)移動(dòng)端小程序三大平臺(tái)進(jìn)行前端的技術(shù)選型，并來說說選其技術(shù)的幾大優(yōu)勢(shì)。技術(shù)的優(yōu)勢(shì)互聯(lián)網(wǎng)前端大潮后，前端出現(xiàn)了大框架，分別是與。 1、技術(shù)選型的背景前端技術(shù)發(fā)展日新月異，互聯(lián)網(wǎng)上出現(xiàn)的新型框架也比較多，如何讓新招聘的人員...

    ccj659 評(píng)論0 收藏0

  • 服務(wù)端預(yù)渲染之Nuxt（介紹篇）

    摘要：為了解決問題，推出了服務(wù)端預(yù)渲染，以便提高對(duì)優(yōu)化。應(yīng)用，到了，單頁面應(yīng)用優(yōu)秀的用戶體驗(yàn)，逐漸成為了主流，頁面整體式渲染出來的，稱之為客戶端渲染。客戶端接收數(shù)據(jù)，然后完成最終渲染。通過對(duì)客戶端服務(wù)端基礎(chǔ)框架的抽象組織，主要關(guān)注的是應(yīng)用的渲染。 現(xiàn)在前端開發(fā)一般都是前后端分離，mvvm和mvc的開發(fā)框架，如Angular、React和Vue等，雖然寫框架能夠使我們快速的完成開發(fā)，但是由于前...

    Shonim 評(píng)論0 收藏0

  • Nuxt.js 基礎(chǔ)入門教程

    摘要：原文鏈接開發(fā)一個(gè)單頁面應(yīng)用，相信很多前端工程師都已經(jīng)學(xué)會(huì)了，但是單頁面應(yīng)用有一個(gè)致命的缺點(diǎn)，就是極不友好。基于它，我們可以快速開發(fā)一個(gè)基于的單頁面應(yīng)用。只有數(shù)據(jù)流存在相關(guān)配置時(shí)可用。引入后，所有頁面均有效。 原文鏈接 Vue 開發(fā)一個(gè)單頁面應(yīng)用，相信很多前端工程師都已經(jīng)學(xué)會(huì)了，但是單頁面應(yīng)用有一個(gè)致命的缺點(diǎn)，就是 SEO 極不友好。除非，vue 能在服務(wù)端渲染（ssr）并直接返回已經(jīng)渲...

    yedf 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<