????????博主今天開設(shè)Nuxt.js專欄，帶您深入探索 Nuxt.js 的精髓，學(xué)習(xí)如何利用其強(qiáng)大功能構(gòu)建出色的前端應(yīng)用程序。我們將探討其核心特點(diǎn)、靈活的路由系統(tǒng)、優(yōu)化技巧以及常見問題的解決方案。無論您是想了解 Nuxt.js 的基礎(chǔ)知識，還是希望掌握進(jìn)階技巧，本專欄都將滿足您的需求。接下來讓我們一起踏上 Nuxt.js 的旅程，開啟一段令人興奮的前端開發(fā)之旅！

需要了解的前置知識：

搜索引擎優(yōu)化(SEO)：是一種通過優(yōu)化網(wǎng)站和內(nèi)容，以提高在搜索引擎中的排名和可見性的過程。它是一種有助于網(wǎng)站獲得更多有機(jī)（非付費(fèi)）流量的策略和技術(shù)。但是采用vue.js開發(fā)的應(yīng)用系統(tǒng)對SEO并不友好。

客戶端渲染(CSR)：客戶端渲染是一種 Web 應(yīng)用程序的渲染方式，其中頁面的內(nèi)容和結(jié)構(gòu)主要由客戶端瀏覽器在運(yùn)行時(shí)生成和呈現(xiàn)，而不是在服務(wù)器端生成。在客戶端渲染中，服務(wù)器主要負(fù)責(zé)提供數(shù)據(jù)和基本的 HTML、CSS 和 JavaScript 文件，然后將這些文件發(fā)送給客戶端瀏覽器。瀏覽器接收到這些文件后，會(huì)解析 HTML 和 CSS，并執(zhí)行 JavaScript 代碼來生成動(dòng)態(tài)內(nèi)容和交互。

服務(wù)器渲染(SSR)：服務(wù)器渲染是一種 Web 應(yīng)用程序的渲染方式，其中頁面的內(nèi)容和結(jié)構(gòu)主要在服務(wù)器端生成，然后發(fā)送給客戶端瀏覽器進(jìn)行顯示。在服務(wù)器渲染中，服務(wù)器接收到客戶端的請求后，會(huì)根據(jù)請求的 URL 和參數(shù)等信息，生成相應(yīng)的 HTML、CSS 和 JavaScript 文件，并將這些文件作為響應(yīng)返回給客戶端瀏覽器。瀏覽器接收到文件后，直接顯示其中的內(nèi)容，無需再執(zhí)行額外的操作。

客戶端渲染與服務(wù)器渲染的區(qū)別：在選擇服務(wù)器渲染還是客戶端渲染時(shí)需要綜合考慮項(xiàng)目需求、技術(shù)復(fù)雜性和性能要求等因素。一般來說，對于需要快速加載、對 SEO 有較高要求的網(wǎng)站，服務(wù)器渲染可能更適合；而對于需要復(fù)雜交互和實(shí)時(shí)更新的應(yīng)用，客戶端渲染可能更具優(yōu)勢。

Vue.js如何實(shí)現(xiàn)SSR：vue.js通用應(yīng)用框架Nuxt，其提供了平滑的開箱即用的體驗(yàn)，建立在同等的vue.js技術(shù)棧之上，但抽象出很多模板，并提供了一些額外的功能，例如靜態(tài)站點(diǎn)生成。通過NUXT可以根據(jù)約定的規(guī)則，快速的實(shí)現(xiàn)Vue SSR。

目錄

初識Nuxt.js

搭建Nuxt.js環(huán)境及創(chuàng)建項(xiàng)目

nuxt目錄結(jié)構(gòu)講解

項(xiàng)目運(yùn)行的基本流程

初識Nuxt.js

什么是nuxt.js？

Nuxt.js 是一個(gè)基于 Vue.js 的開源框架，旨在簡化和加速前端應(yīng)用程序的開發(fā)過程。它結(jié)合了 Vue.js 強(qiáng)大的漸進(jìn)式 JavaScript 框架和服務(wù)端渲染（SSR）的能力，提供了一種簡單且靈活的方式來構(gòu)建高性能、可擴(kuò)展的 web 應(yīng)用。這意味著，與傳統(tǒng)的服務(wù)器端(或多頁面)應(yīng)用程序相比，Nuxt應(yīng)用程序的渲染速度更快。

為什么要使用nuxt.js？

主要是為了實(shí)現(xiàn)服務(wù)端的渲染（SSR），利用Nuxt.js的服務(wù)端渲染能力來解決Vue項(xiàng)目的SEO問題

學(xué)習(xí)nuxt.js的前提和適用人群是？

學(xué)習(xí) Nuxt.js 的前提是對 Vue.js 有一定的了解和基礎(chǔ)。因?yàn)?Nuxt.js 是基于 Vue.js 的框架，所以對 Vue.js 的基本概念、組件開發(fā)和響應(yīng)式原理有一定的理解是非常有幫助的。適用前端開發(fā)者、初學(xué)者以及對性能和 SEO 要求較高的項(xiàng)目團(tuán)隊(duì)。對希望使用 TypeScript 進(jìn)行開發(fā)的開發(fā)者來說Nuxt.js 也是一個(gè)很好的選擇。

nuxt.js的工作原理是？

1）瀏覽器(客戶端)發(fā)送http請求到Node.js服務(wù)端。

2）部署在Node.js的應(yīng)用Nuxt.js接收到瀏覽器請求，它會(huì)去請求后臺接口服務(wù)端

3）后臺接口服務(wù)端會(huì)響應(yīng)JSON數(shù)據(jù)，Nuxt.js獲取數(shù)據(jù)后進(jìn)行服務(wù)端渲染成html

4）然后Nuxt.js將html頁面響應(yīng)給瀏覽器

5）瀏覽器直接將接收到html頁面進(jìn)行展示

nuxt.js使用了 vue.js + webpack + babel 三大技術(shù)架構(gòu)，集成了 vue.js 中以下組件/框架，用于開發(fā)完整而強(qiáng)大的Web應(yīng)用，當(dāng)然nuxt也預(yù)安裝了標(biāo)準(zhǔn)Vue應(yīng)用程序中所用的各種包，如下：

Vue、Vue-router、Vuex、Vue Server Renderer(vue服務(wù)器端渲染)、Vue-Meta

nuxt.js重大的發(fā)布版本情況？

1）2016 年 10 月：Nuxt.js 項(xiàng)目啟動(dòng)。由 Alexandre Chopin 和 Sébastien Chopin 創(chuàng)建。

2）2019 年 10 月：Nuxt.js 2.0 發(fā)布。這個(gè)版本帶來了重大改進(jìn)，包括更強(qiáng)大的靜態(tài)生成支持、TypeScript 支持、新的模塊系統(tǒng)和更多的性能優(yōu)化。

3）2021 年 10 月：Nuxt.js 2.15 發(fā)布。這個(gè)版本帶來了對 Nuxt.js 3 的支持和遷移工具，以幫助開發(fā)者平滑過渡到 Nuxt.js 3。

4）2022 年 11 月 16 日,全球最大的 Nuxt 會(huì)議 Nuxt Nation 2022 在線舉行,并正式發(fā)布了 Nuxt.js 3.0 的第一個(gè)穩(wěn)定版本。

也就是截至本文撰寫完成，nuxt.js的3版本才剛剛發(fā)布不久，博主也會(huì)在今后的專欄文章中，著重講解一下nuxt.js2，后期也會(huì)著重講解一下nuxt.js3的知識，敬請期待！

Nuxt.js 2 和 Nuxt.js 3 的區(qū)別？

構(gòu)建方式：

Nuxt.js 2 使用基于 webpack 的構(gòu)建系統(tǒng)。而 Nuxt.js 3 引入了 Vite，一個(gè)基于 ES Modules 的構(gòu)建工具，用于提供更快的開發(fā)體驗(yàn)和構(gòu)建速度。

性能和開發(fā)體驗(yàn)：

Nuxt.js 3 在構(gòu)建和啟動(dòng)速度上進(jìn)行了優(yōu)化，通過使用 Vite 和 ES Modules，可以提供更快的熱重載、瞬時(shí)啟動(dòng)和速度更快的開發(fā)體驗(yàn)。

配置方式：

Nuxt.js 2 使用 nuxt.config.js 文件來配置應(yīng)用程序。而 Nuxt.js 3 引入了運(yùn)行時(shí)配置 (Runtime Configuration)，通過 JavaScript 代碼來配置應(yīng)用程序，更加靈活且易于使用。

插件系統(tǒng)：

Nuxt.js 3 對插件系統(tǒng)進(jìn)行了重大改進(jìn)。插件現(xiàn)在稱為模塊 (Modules)，可以通過 npm 安裝和發(fā)布。Nuxt.js 3 的模塊系統(tǒng)更加高度模塊化和擴(kuò)展性，并提供了更好的測試和可組合性。

TypeScript 支持：

Nuxt.js 2 對 TypeScript 的支持較為有限，需要額外的配置和插件。而 Nuxt.js 3 默認(rèn)支持 TypeScript，可以直接使用 TypeScript 開發(fā)應(yīng)用程序。

注意：Nuxt.js 3 目前仍處于 Beta 階段，并且與 Nuxt.js 2 在某些方面存在兼容性差異。如果你是新項(xiàng)目，可以考慮嘗試 Nuxt.js 3 來獲得更好的性能和開發(fā)體驗(yàn)。但如果你正在維護(hù)一個(gè)已經(jīng)使用 Nuxt.js 2 的項(xiàng)目，可能需要進(jìn)行一些遷移和調(diào)整才能適配 Nuxt.js 3。

nuxt生命周期流程圖？

因?yàn)閚uxt.js3才剛出不久，所以本專欄前期會(huì)先講解nuxt.js2相關(guān)的知識，后期再去講解nuxt.js3相關(guān)的知識，所以給出 nuxt的相關(guān)網(wǎng)址：nuxt.js2 以及 nuxt.js3 ，博主給出的都是中文網(wǎng)站，都是國內(nèi)站點(diǎn)訪問的速度很快，如果想看國外英文網(wǎng)站直接百度搜索nuxt官網(wǎng)即可，這里不再贅述：

下圖是nuxt.js應(yīng)用一個(gè)完整的服務(wù)器請求到渲染(或用戶通過<nuxt-link>切換路由渲染頁面)的流程

搭建Nuxt.js環(huán)境及創(chuàng)建項(xiàng)目

在使用Nuxt.js之前，你需要確保你的電腦有一臺編輯器(這是最基礎(chǔ)的，博主推薦宇宙最強(qiáng)編輯器vscode)，其次你得保證你的電腦有node開發(fā)環(huán)境，如果你僅僅是一個(gè)初學(xué)者，不清楚node的話，推薦看一下我之前對node講解的文章：node環(huán)境安裝 。

全局安裝創(chuàng)建：cmd + r 新建終端輸入以下命令進(jìn)行全局安裝：

npm install -g create-nuxt-app

全局安裝該包的過程有點(diǎn)緩慢，耐心等待一下即可：

安裝完成之后，我們找到相應(yīng)創(chuàng)建項(xiàng)目的目錄，然后執(zhí)行如下命令進(jìn)行創(chuàng)建：

create-nuxt-app 項(xiàng)目名稱

執(zhí)行這段代碼之后，就可以創(chuàng)建項(xiàng)目了，創(chuàng)建項(xiàng)目的過程和我們之前學(xué)習(xí)過創(chuàng)建Vue和React項(xiàng)目的過程基本一致，其基本安裝過程如下：

有幾個(gè)不同的就是nuxt提供了ui組件庫供我們選擇，這里我僅僅是出于創(chuàng)建項(xiàng)目的樣式，就不再選擇組件庫了，所以我選擇None，如下：

還有一個(gè)選項(xiàng)就是讓我們選項(xiàng)創(chuàng)建什么項(xiàng)目，有兩個(gè)選項(xiàng)：創(chuàng)建服務(wù)端渲染項(xiàng)目和單頁面應(yīng)用程序項(xiàng)目，這兩個(gè)項(xiàng)目nuxt都是支持的，但是我們本身是學(xué)習(xí)服務(wù)端渲染的，所以我們選擇第一個(gè)服務(wù)端渲染：

接下來的選項(xiàng)是部署目標(biāo)的意思，它指定了你將如何將 Nuxt.js 項(xiàng)目部署到服務(wù)器上。在創(chuàng)建 Nuxt.js 項(xiàng)目時(shí)，你可以選擇不同的部署目標(biāo)。

Server (Node.js hosting)：

選擇 Server 作為部署目標(biāo)意味著你將使用 Node.js 服務(wù)器來運(yùn)行 Nuxt.js 應(yīng)用程序。這意味著你需要在服務(wù)器上安裝和配置 Node.js 環(huán)境，并且使用 Node.js 來托管你的應(yīng)用程序。

Static (Static/Jamstack hosting)：

選擇 Static 作為部署目標(biāo)意味著你將生成靜態(tài)文件，并將這些文件部署到 Web 服務(wù)器上。這種部署方式適用于不需要服務(wù)器端渲染（SSR）和只依賴于靜態(tài)文件的應(yīng)用程序。

選擇部署目標(biāo)取決于你的項(xiàng)目需求和個(gè)人偏好：

如果你需要服務(wù)器端渲染、服務(wù)器端處理或與服務(wù)器端 API 進(jìn)行交互，那么選擇 Server 部署目標(biāo)是合適的。如果你的應(yīng)用程序是靜態(tài)內(nèi)容驅(qū)動(dòng)的，并且不依賴于服務(wù)器端渲染，那么選擇 Static 部署目標(biāo)可能更適合你。根據(jù)具體情況選擇合適的部署目標(biāo)可以提供更好的性能和開發(fā)體驗(yàn)。

這里我就選擇第一個(gè)Server了：

接下來選擇項(xiàng)目創(chuàng)建的開發(fā)工具，這里我就選擇第一個(gè)針對vscode的了，如果你想創(chuàng)建TS項(xiàng)目，在上面選擇TS即可：

當(dāng)安裝 Nuxt.js 項(xiàng)目時(shí)詢問你的 GitHub 用戶名是為了將你的 GitHub 賬戶與項(xiàng)目相關(guān)聯(lián)：

當(dāng)安裝 Nuxt.js 項(xiàng)目并被詢問你的 GitHub 用戶名時(shí)，你需要提供你的 GitHub 用戶名。這樣的話，Nuxt.js 就可以通過你的用戶名來訪問你的 GitHub 倉庫，并獲取所需的模板或其他有關(guān)信息。請確保提供的 GitHub 用戶名是準(zhǔn)確的，這樣 Nuxt.js 才能正確地連接到你的 GitHub 賬戶并獲取所需的資源。

如果你沒有 GitHub 賬戶或不希望與 GitHub 相關(guān)聯(lián)，你可以選擇從頭開始創(chuàng)建項(xiàng)目，而不使用模板。在這種情況下，你可以忽略這個(gè)問題，或者輸入 N/A 或其他適合的值來跳過這個(gè)步驟。

出現(xiàn)如下畫面說明你的 nuxt 項(xiàng)目已經(jīng)安裝完成了，如下：

第一次運(yùn)行項(xiàng)目，終端可能會(huì)出現(xiàn)如下選項(xiàng)詢問你是否對參與調(diào)查或反饋感興趣。選擇n即可

啟動(dòng)完成之后終端會(huì)出現(xiàn)一個(gè)網(wǎng)址，打開該網(wǎng)址就能在本地瀏覽器進(jìn)行運(yùn)行了，如下：

可以看到我們采用這種方式進(jìn)行安裝nuxt，默認(rèn)是給出我們最新的2版本，如果想安裝3版本的話又是另一個(gè)命令了，這個(gè)暫且不提，后期會(huì)繼續(xù)講到，如下：

當(dāng)我們右鍵查看源代碼，可以看到整個(gè)html模塊內(nèi)容都已經(jīng)被加載出來了，不像vue創(chuàng)建的源代碼只有一個(gè)根標(biāo)簽，采用了nuxt方式方便了爬蟲對我們網(wǎng)頁數(shù)據(jù)的爬取。SEO大大提高：

npx安裝創(chuàng)建(官方推薦)：確保安裝了npx（npx在npm版本5.2.0已經(jīng)默認(rèn)安裝了），npx是npm的高級版本，npx具有更強(qiáng)大的功能。其作用是避免全局安裝模塊：npx臨時(shí)安裝了一個(gè) create-nuxt-app 模塊，來初始化項(xiàng)目，使用過后會(huì)自動(dòng)刪除 create-nuxt-app 模塊(下面不需要全局安裝)：

在想創(chuàng)建nuxt項(xiàng)目的文件夾下，終端執(zhí)行如下命令即可：

npx create-nuxt-app 項(xiàng)目名稱

其配置過程和上面全局安裝創(chuàng)建的項(xiàng)目過程基本一致，如下也是相同的操作，最終也能實(shí)現(xiàn)項(xiàng)目的運(yùn)行，在這就不再過多贅述了。

nuxt目錄結(jié)構(gòu)講解

如果是老版本的nuxt的話，其創(chuàng)建的目錄結(jié)構(gòu)為如下這種

但是我們現(xiàn)在默認(rèn)安裝的是nuxt2版本的最新版，其默認(rèn)的文件目錄如下所示：

新版對應(yīng)的文件目錄及其相應(yīng)的功能如下：

.nuxt              //nuxt自動(dòng)生成，臨時(shí)生成的用于編輯的文件
components         //用于自己編寫或定制的Vue組件
node_modules       //項(xiàng)目所需依賴
pages              //用于組織應(yīng)用的路由及視圖,Nuxt.js根據(jù)該目錄結(jié)構(gòu)自動(dòng)生成對應(yīng)的路由配置，一般情況下文件夾名不可更改
static             //用于存放應(yīng)用的靜態(tài)文件，此類文件不會(huì)被 Nuxt.js 調(diào)用 Webpack 進(jìn)行構(gòu)建編譯處理。 服務(wù)器啟動(dòng)的時(shí)候，該目錄下的文件會(huì)映射至應(yīng)用的根路徑 / 下。文件夾名不可更改。
store              //用于組織應(yīng)用的Vuex 狀態(tài)管理。文件夾名不可更改。
.editorconfig      //開發(fā)工具格式配置
.gitignore         //ESLint的配置文件，用于檢查代碼格式
jsconfig.json      //創(chuàng)建項(xiàng)目時(shí)為vscode獨(dú)有創(chuàng)建的文件
nuxt.config.js     //用于組織Nuxt.js 應(yīng)用的個(gè)性化配置，以便覆蓋默認(rèn)配置。文件名不可更改。
package.json       //npm 包管理配置文件
README.md          //自述文件
// yarn.lock          //yarn自動(dòng)生成，用于幫助package的統(tǒng)一設(shè)置的，npm也有相同的操作

相信細(xì)心的小伙伴已經(jīng)看出來了，怎么少了幾個(gè)文件夾？是的，新版本下assets、layout、middleware、plugins、server這五個(gè)文件夾就沒了，沒有的那幾個(gè)文件夾需要用到時(shí)可以通過手動(dòng)創(chuàng)建的方式來使用。

項(xiàng)目運(yùn)行的基本流程

項(xiàng)目運(yùn)行起來之后，會(huì)自動(dòng)找到pages下的index.vue，如下：

原本代碼的?Tutorial 就類似一個(gè)組件，我們把它注釋掉然后寫一個(gè)首頁，就會(huì)在頁面上展示了，記得vue2模板是需要套一個(gè)根標(biāo)簽div的，這一點(diǎn)別忘記了，不清楚vue的朋友可以訂閱一下我之前講解的?vue專欄

當(dāng)我們在pages文件夾下，再創(chuàng)建一個(gè)新的vue文件時(shí)，該文件會(huì)被 .nuxt 下的 router.js 自動(dòng)同步配置，如下：

當(dāng)我們在瀏覽器中訪問這個(gè)路由的時(shí)候，就會(huì)自動(dòng)加載我們的組件內(nèi)容，如下：

我們在components文件夾創(chuàng)建的組件，在pages文件夾vue文件中無需像vue2一樣還需要進(jìn)行路由組件的注冊，直接引用即可，當(dāng)然你引用也可以，這個(gè)無所謂！如下：

結(jié)果如下所示，說明我們引用組件成功！

本文章主要介紹了下Nuxt.js的基本情況以及項(xiàng)目的基本構(gòu)建與應(yīng)用，下篇文章將繼續(xù)講解Nuxt.js的相關(guān)知識，關(guān)注博主不迷路，學(xué)習(xí)更多前端知識！文章來源地址http://www.zghlxwxcb.cn/news/detail-579946.html

到了這里，關(guān)于Nuxt.js--》解密Nuxt.js：構(gòu)建優(yōu)雅、高效的現(xiàn)代化Vue.js應(yīng)用的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！