為什么在Vue上使用Nuxt.js

這篇文章主要講解了“為什么在Vue上使用Nuxt.js”，文中的講解內(nèi)容簡單清晰，易于學(xué)習(xí)與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“為什么在Vue上使用Nuxt.js”吧！

Nuxt.js是一個(gè)建立在Vue.js上的前端框架，它提供了很好的開發(fā)特性，比如服務(wù)器端渲染、自動(dòng)生成路由、改進(jìn)的元標(biāo)簽管理和SEO改進(jìn)。

為什么在Vue上使用Nuxt.js？

Nuxt.js為前端開發(fā)人員提供了許多好處，但是有一項(xiàng)關(guān)鍵功能使我們最終決定使用此框架——SEO改進(jìn)。我們的應(yīng)用程序需要此功能，因?yàn)樗皇堑湫偷膬?nèi)部SPA（單頁應(yīng)用程序）。這是一個(gè)包含社交共享功能和管理功能的公共網(wǎng)絡(luò)應(yīng)用程序。

說到社交共享，Nuxt.js有很好的元標(biāo)簽管理，所以我們可以根據(jù)后端接收的數(shù)據(jù)輕松地創(chuàng)建特定的、可定制的社交共享窗口。

那么，SEO改進(jìn)如何工作？

為了改善SEO，Nuxt.js使用SSR（服務(wù)器端渲染）。SSR在獲取AJAX數(shù)據(jù)后將Vue.js組件渲染為服務(wù)器（Node.js）上的HTML字符串。完成所有異步邏輯后，它將它們直接發(fā)送到瀏覽器，然后最終將靜態(tài)標(biāo)記提供給客戶端上的完全交互式應(yīng)用程序。此功能允許使用Google SEO解析器很好地解析DOM元素。 SEO解析器在加載網(wǎng)站DOM時(shí)立即以巨大的速度解析DOM元素。

另一方面，典型的SPA應(yīng)用程序是用Vue這樣的框架構(gòu)建的 Vue.js、React、Angular等都是在DOM加載后用AJAX從后端獲取數(shù)據(jù)，因此SEO解析器無法解析所有的DOM元素，因?yàn)樗鼈冞€沒有渲染。AJAX提取是異步的，而SEO解析則不是。

Nuxt.js需要與Vue不同的心態(tài)

Nuxt.js和Vue.js處理邏輯的方式非常不同。主要區(qū)別在于Vue始終在客戶端運(yùn)行，而Nuxt不在客戶端運(yùn)行，這在某些情況下可能會(huì)導(dǎo)致重大問題。例如，如果您想在加載應(yīng)用程序后立即選擇DOM元素，則該應(yīng)用程序可能在Node.js端運(yùn)行，當(dāng)然，Node.js中沒有DOM元素。

訪問瀏覽器的本地存儲時(shí)也會(huì)發(fā)生同樣的情況。這就是Nuxt在本地存儲上使用cookie的主要原因——因?yàn)樗鼈兪冀K可以訪問。

有了Vue，我們就不會(huì)遇到這類問題，因?yàn)樗偸窃诳蛻舳松线\(yùn)行，因此我們不必理會(huì)這些潛在的問題。

讓我們看看如何在Vue中處理這些類型的潛在問題，以及如何在Nuxt中進(jìn)行處理——帶有實(shí)際的代碼示例。

此圖中最重要的事情是“created”方法的早期返回。  Nuxt有一個(gè)全局可訪問的對象“process”，它顯示我們當(dāng)前是在服務(wù)器端還是在客戶端運(yùn)行。我們看到的代碼背后的邏輯專注于管理 socket  連接，并且顯然，如果我們在服務(wù)器上運(yùn)行，則我們不想在接收 socket 事件時(shí)更新DOM，因?yàn)榉?wù)器端沒有DOM。

如果這是一個(gè)Vue.js應(yīng)用程序，則除了早期返回部分外，代碼將是相同的——因?yàn)樵摿鞒虒⑹冀K在客戶端上運(yùn)行，并且無需檢查該特定語句。

Nuxt.js基于文件夾結(jié)構(gòu)生成自己的路由器，而對于Vue.js，它必須手動(dòng)完成——但請記住，這兩種原則各有利弊。自動(dòng)生成的路由的優(yōu)點(diǎn)是創(chuàng)建路由更容易，更快捷；您只需創(chuàng)建目錄和文件，Nuxt即可完成所有工作。但是缺點(diǎn)是，與手動(dòng)編寫相比，它的可控性和可管理性較差。

與手動(dòng)生成的路由器相比，使用Vue.js可以輕松地將自己的邏輯添加到路由器，導(dǎo)入服務(wù)并具有更多的路由管理控制。這個(gè)原則比較耗時(shí)，也很復(fù)雜，但這并不總是意味著它會(huì)變得更糟。

Nuxt.js 準(zhǔn)備好用于企業(yè)級應(yīng)用程序了嗎？

過去有兩個(gè)主要因素使Nuxt.js無法用于企業(yè)級應(yīng)用程序：

• typescript支持不佳

• 糟糕的服務(wù)器端錯(cuò)誤處理

當(dāng)我們處于項(xiàng)目的研究階段（大約6個(gè)月前）時(shí)，沒有可靠的Typescript入門套件或配置值得其冒險(xiǎn)使用。由于存在有大量的linting錯(cuò)誤和類型缺失，因此我們決定使用Vanilla  JS（ES6  +）。同時(shí)，對Nuxt.js的Typescript支持已經(jīng)得到了極大的改善，現(xiàn)在已經(jīng)可以使用新的入門套件和配置，而不必?fù)?dān)心與Typescript相關(guān)的問題。

糟糕的服務(wù)器端錯(cuò)誤處理是我們在開發(fā)Nuxt.js應(yīng)用程序時(shí)必須解決的最大，最苛刻的問題。

當(dāng)代碼在Nuxt.js服務(wù)器（Node.js）端執(zhí)行時(shí)，應(yīng)用程序拋出了非常不相關(guān)的錯(cuò)誤消息，調(diào)試和修復(fù)這些相同的錯(cuò)誤確實(shí)非常困難和復(fù)雜。為了簡化調(diào)試，有必要以特定方式處理Node.js方面的錯(cuò)誤。

現(xiàn)在，有了更好的Typescript支持和對SSR更深入的理解，我可以肯定地說，Nuxt.js已經(jīng)為中、企業(yè)級應(yīng)用做好了準(zhǔn)備，但是仍然有改進(jìn)的空間——比如在Nuxt的Node.js端提供更好的錯(cuò)誤處理和AJAX管理。

Nuxt應(yīng)用程序結(jié)構(gòu)

Nuxt.js與Vue.js具有非常相似的體系結(jié)構(gòu)。只有兩個(gè)主要區(qū)別：

• Router

• Main App.vue component

Nuxt根據(jù)頁面的目錄和文件結(jié)構(gòu)生成路由器邏輯及其路由。例如，如果我們創(chuàng)建目錄和文件 about/index.vue，則Nuxt.js會(huì)自動(dòng)為該頁面創(chuàng)建路線 /about。無需在應(yīng)用程序中的其他任何地方定義或配置路由。

對于嵌套路由，只需要在父目錄內(nèi)創(chuàng)建一個(gè)目錄——about/me/index.vue 將生成 about/me 路由。對于創(chuàng)建動(dòng)態(tài)嵌套路由或嵌套路由參數(shù)，所需要做的就是用lodash前綴命名子目錄—— user/_id /index.vue 將根據(jù)用戶的ID為用戶創(chuàng)建動(dòng)態(tài)嵌套路由。

Nuxt.js的另一個(gè)與結(jié)構(gòu)相關(guān)的功能非常有趣——布局。Vue.js應(yīng)用程序具有主App.vue文件，該文件是所有應(yīng)用程序組件的主要根組件包裝。Nuxt.js使用布局，其中每個(gè)布局都充當(dāng)應(yīng)用程序組件的單獨(dú)包裝。例如，如果我們希望某些特定的頁面使用不同的UI庫、全局CSS樣式、字體族、設(shè)計(jì)系統(tǒng)、元標(biāo)記或其他元素，我們可以定義使用什么布局作為其父根組件。默認(rèn)情況下，所有的  Nnux.js 頁面都使用 default.vue 布局。

Nuxt.js中的Vuex的結(jié)構(gòu)幾乎與通常的Vue.js環(huán)境相同——帶有  store 模塊。這種結(jié)構(gòu)化是可選的，但強(qiáng)烈建議您進(jìn)行更好的結(jié)構(gòu)和代碼維護(hù)。每個(gè) store  都應(yīng)基于應(yīng)用程序邏輯和數(shù)據(jù)流進(jìn)行結(jié)構(gòu)化和模塊化。例如，如果應(yīng)用程序包含授權(quán)邏輯，則我們必須創(chuàng)建用于 store 所有授權(quán)數(shù)據(jù)和邏輯的授權(quán)  store 模塊，例如登錄，注銷，cookie，令牌，用戶數(shù)據(jù)等。

感謝各位的閱讀，以上就是“為什么在Vue上使用Nuxt.js”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對為什么在Vue上使用Nuxt.js這一問題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云，小編將為大家推送更多相關(guān)知識點(diǎn)的文章，歡迎關(guān)注！