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

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

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

一、客戶端渲染和服務器端渲染的區別

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

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

1.客戶端渲染

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

2.服務器端渲染

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

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

二、如何判斷網頁是不是服務器端渲染

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

三、快速體驗Nuxt.js

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

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

（2）打開終端，執行命令，創建項目：

npx create-nuxt-app nuxt-demo

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

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

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

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

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

cd nuxt-demo
npm run dev

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

四、目錄結構

我們看一下Nuxt目錄結構中的關鍵文件的作用：

assets：存放待編譯的靜態資源，如Less、Sass。

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

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

layouts：布局目錄，用于存放應用的布局組件。

middleware：用于存放中間件。

pages：用于存放應用的路由及視圖，Nuxt.js會根據該目錄結構自動生成對應的路由配置。

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

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

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。