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

在旬陽等地區(qū)，都構(gòu)建了全面的區(qū)域性戰(zhàn)略布局，加強發(fā)展的系統(tǒng)性、市場前瞻性、產(chǎn)品創(chuàng)新能力，以專注、極致的服務(wù)理念，為客戶提供成都做網(wǎng)站、成都網(wǎng)站建設(shè) 網(wǎng)站設(shè)計制作按需定制制作,公司網(wǎng)站建設(shè),企業(yè)網(wǎng)站建設(shè),品牌網(wǎng)站設(shè)計,營銷型網(wǎng)站建設(shè),外貿(mào)網(wǎng)站建設(shè),旬陽網(wǎng)站建設(shè)費用合理。

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

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

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

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

那么，SEO改進如何工作？

為了改善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時立即以巨大的速度解析DOM元素。

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

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

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

訪問瀏覽器的本地存儲時也會發(fā)生同樣的情況。這就是Nuxt在本地存儲上使用cookie的主要原因——因為它們始終可以訪問。

有了Vue，我們就不會遇到這類問題，因為它總是在客戶端上運行，因此我們不必理會這些潛在的問題。

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

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

如果這是一個Vue.js應(yīng)用程序，則除了早期返回部分外，代碼將是相同的——因為該流程將始終在客戶端上運行，并且無需檢查該特定語句。

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

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

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

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

• typescript支持不佳

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

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

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

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

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

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

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

• Router

• Main App.vue component

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

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

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

Nuxt.js中的Vuex的結(jié)構(gòu)幾乎與通常的Vue.js環(huán)境相同——帶有  store 模塊。這種結(jié)構(gòu)化是可選的，但強烈建議您進行更好的結(jié)構(gòu)和代碼維護。每個 store  都應(yīng)基于應(yīng)用程序邏輯和數(shù)據(jù)流進行結(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這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關(guān)知識點的文章，歡迎關(guān)注！