Vue.js是Web前端的一個(gè)框架，用來(lái)快速開(kāi)發(fā)單頁(yè)面應(yīng)用。當(dāng)Vue.js開(kāi)發(fā)變成主流的時(shí)候，許多公司的技術(shù)團(tuán)隊(duì)都打算把下一個(gè)新項(xiàng)目換成用Vue.js來(lái)開(kāi)發(fā)。

但是當(dāng)我們?cè)敿?xì)了解Vue.js以后，會(huì)發(fā)現(xiàn)一個(gè)很尷尬的問(wèn)題，那就是Vue.js的頁(yè)面是采用客戶端渲染的，它不像PHP、JSP那樣是服務(wù)器端渲染，搜索引擎無(wú)法收錄網(wǎng)站的內(nèi)容。

那有沒(méi)有辦法既能用上Vue.js，又能實(shí)現(xiàn)服務(wù)器端渲染呢？不用擔(dān)心，Nuxt.js框架就是一個(gè)基于Vue.js的服務(wù)器端渲染方案。

一、客戶端渲染和服務(wù)器端渲染的區(qū)別

兩種渲染方式的區(qū)別在于：首次加載出來(lái)的頁(yè)面中，是否含有數(shù)據(jù)。這里所說(shuō)的數(shù)據(jù)，是指頁(yè)面中具體的文字內(nèi)容。

從下面這張圖可以比較兩種渲染方式的區(qū)別。

1.客戶端渲染

客戶端渲染的情況下，瀏覽器首次加載出來(lái)的是空的網(wǎng)頁(yè)模板和JavaScript程序，這個(gè)頁(yè)面是不包含數(shù)據(jù)的，數(shù)據(jù)需要通過(guò)Ajax再次請(qǐng)求服務(wù)器獲得。此時(shí)用戶會(huì)看到一個(gè)Loading加載提示頁(yè)，或者是一個(gè)空白頁(yè)，等待數(shù)據(jù)加載完成后頁(yè)面才會(huì)完整顯示出來(lái)。

2.服務(wù)器端渲染

服務(wù)器端渲染時(shí)，瀏覽器首次加載出來(lái)的就是一個(gè)包含數(shù)據(jù)的完整頁(yè)面，但這些數(shù)據(jù)并不是開(kāi)發(fā)人員手動(dòng)填進(jìn)去的，而是由服務(wù)器預(yù)先完成渲染（也就是把數(shù)據(jù)填充到網(wǎng)頁(yè)模板中），把渲染結(jié)果返回給瀏覽器。這樣用戶會(huì)感覺(jué)到網(wǎng)頁(yè)的打開(kāi)速度很快，搜索引擎也能正確識(shí)別網(wǎng)頁(yè)中的數(shù)據(jù)。

也就是說(shuō)，服務(wù)器端渲染并不是什么新技術(shù)，以前的網(wǎng)頁(yè)全都是服務(wù)器端渲染的，只不過(guò)用前端技術(shù)實(shí)現(xiàn)服務(wù)器端渲染有點(diǎn)困難。有了Nuxt.js框架以后，就很容易實(shí)現(xiàn)了。

二、如何判斷網(wǎng)頁(yè)是不是服務(wù)器端渲染

當(dāng)我們?cè)跒g覽器上打開(kāi)網(wǎng)頁(yè)后，單擊鼠標(biāo)右鍵，選擇“查看網(wǎng)頁(yè)源代碼”，然后看一下源代碼中是否包含數(shù)據(jù)。如果源代碼中有數(shù)據(jù)，那么網(wǎng)頁(yè)就是服務(wù)器端渲染的；如果源代碼中沒(méi)有數(shù)據(jù)，而頁(yè)面中有數(shù)據(jù)的話，那么數(shù)據(jù)就是通過(guò)Ajax異步加載出來(lái)的，這樣的網(wǎng)頁(yè)就是客戶端渲染。

三、快速體驗(yàn)Nuxt.js

Nuxt.js是工作在服務(wù)器端的，它依賴于Node.js。我們先確保Node.js已經(jīng)安裝了，然后我們使用npx命令來(lái)創(chuàng)建一個(gè)項(xiàng)目。這里我們假設(shè)安裝到D:demo命令下，創(chuàng)建一個(gè)nuxt-demo的項(xiàng)目。

（1）使用VS Code打開(kāi)D:demo目錄。

（2）打開(kāi)終端，執(zhí)行命令，創(chuàng)建項(xiàng)目：

npx create-nuxt-app nuxt-demo

（3）在創(chuàng)建項(xiàng)目過(guò)程中，會(huì)詢問(wèn)選擇哪個(gè)包管理器，在這里選擇使用npm：

? Choose the package manager (Use arrow keys)
Yarn
> Npm

（4）詢問(wèn)選擇哪個(gè)渲染模式，在這里選擇使用SSR（代表服務(wù)器端渲染）：

? Choose rendering mode (Use arrow keys)
> Universal (SSR)
Single Page App

（5）安裝配置完成后，啟動(dòng)項(xiàng)目，命令如下：

cd nuxt-demo
npm run dev

（6）通過(guò)瀏覽器訪問(wèn)http://localhost:3000/，查看啟動(dòng)后的項(xiàng)目。

四、目錄結(jié)構(gòu)

我們看一下Nuxt目錄結(jié)構(gòu)中的關(guān)鍵文件的作用：

assets：存放待編譯的靜態(tài)資源，如Less、Sass。

static：存放不需要webpack編譯的靜態(tài)文件，服務(wù)器啟動(dòng)的時(shí)候，該目錄下的文件會(huì)映射至應(yīng)用的根路徑“/”下。

components：存放自己編寫(xiě)的Vue組件。

layouts：布局目錄，用于存放應(yīng)用的布局組件。

middleware：用于存放中間件。

pages：用于存放應(yīng)用的路由及視圖，Nuxt.js會(huì)根據(jù)該目錄結(jié)構(gòu)自動(dòng)生成對(duì)應(yīng)的路由配置。

plugins：用于存放需要在根Vue應(yīng)用實(shí)例化之前需要運(yùn)行的JavaScript插件。

nuxt.config.js：用于存放Nuxt.js應(yīng)用的自定義配置，以便覆蓋默認(rèn)配置。

關(guān)于Nuxt.js的介紹就到這里了。其實(shí)Nuxt.js的使用還是非常簡(jiǎn)單的，但是在面試中，許多前端面試官都會(huì)提問(wèn)這個(gè)技術(shù)點(diǎn)，大家想要深入學(xué)習(xí)的話可以參考Nuxt.js的官方文檔。

總結(jié)

以上是生活随笔為你收集整理的ajax获得excel文件流在前端打开_主流前端技术讲解，面试必考！的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。