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

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

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

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

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

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

1.客戶端渲染

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

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

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

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

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

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

三、快速體驗Nuxt.js

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

（1）使用VS Code打開D:demo目錄。

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

npx create-nuxt-app nuxt-demo

（3）在創(chuàng)建項目過程中，會詢問選擇哪個包管理器，在這里選擇使用npm：

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

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

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

（5）安裝配置完成后，啟動項目，命令如下：

cd nuxt-demo
npm run dev

（6）通過瀏覽器訪問http://localhost:3000/，查看啟動后的項目。

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

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

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

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

components：存放自己編寫的Vue組件。

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

middleware：用于存放中間件。

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

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

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

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

總結(jié)

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

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