為什么在Vue上使用Nuxt.js

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

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

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

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

說到社交共享，Nuxt.js有很好的元標簽管理，所以我們可以根據后端接收的數據輕松地創建特定的、可定制的社交共享窗口。

那么，SEO改進如何工作？

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

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

Nuxt.js需要與Vue不同的心態

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

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

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

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

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

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

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

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

Nuxt.js 準備好用于企業級應用程序了嗎？

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

• typescript支持不佳

• 糟糕的服務器端錯誤處理

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

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

當代碼在Nuxt.js服務器（Node.js）端執行時，應用程序拋出了非常不相關的錯誤消息，調試和修復這些相同的錯誤確實非常困難和復雜。為了簡化調試，有必要以特定方式處理Node.js方面的錯誤。

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

Nuxt應用程序結構

Nuxt.js與Vue.js具有非常相似的體系結構。只有兩個主要區別：

• Router

• Main App.vue component

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

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

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

Nuxt.js中的Vuex的結構幾乎與通常的Vue.js環境相同——帶有  store 模塊。這種結構化是可選的，但強烈建議您進行更好的結構和代碼維護。每個 store  都應基于應用程序邏輯和數據流進行結構化和模塊化。例如，如果應用程序包含授權邏輯，則我們必須創建用于 store 所有授權數據和邏輯的授權  store 模塊，例如登錄，注銷，cookie，令牌，用戶數據等。

感謝各位的閱讀，以上就是“為什么在Vue上使用Nuxt.js”的內容了，經過本文的學習后，相信大家對為什么在Vue上使用Nuxt.js這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！