一、概述
通常使用 VUE 開(kāi)發(fā)的是單頁(yè)應(yīng)用，簡(jiǎn)稱SPA。隨著工程不斷變大，打包文件不斷增長(zhǎng)，頁(yè)面的整體刷新加載速度慢慢成為瓶頸，越來(lái)越無(wú)法滿足業(yè)務(wù)對(duì)頁(yè)面響應(yīng)速度的要求。單頁(yè)應(yīng)用由于主體是一個(gè)大的js，對(duì)搜索引擎不友好。
因而開(kāi)發(fā)方式又討論到SSR方案（服務(wù)端渲染），這是傳統(tǒng)的開(kāi)發(fā)方式，比如JSP，PHP，thyemeleaf 等。它是在服務(wù)端生成HTML，返回給瀏覽器使用。
SSR的優(yōu)點(diǎn)：1、對(duì)SEO友好。2、更快的內(nèi)容到達(dá)時(shí)間。
所以在使用SSR的第一個(gè)場(chǎng)景，必然是對(duì)響應(yīng)速度有較高的要求
SSR的瓶頸點(diǎn)和風(fēng)險(xiǎn)：
1、更長(zhǎng)的鏈路，之前是 瀏覽器 ==> Nginx ==> 后臺(tái)服務(wù)，而現(xiàn)在就變成 瀏覽器 ==> Nginx ==> nodejs ==> 后臺(tái)服務(wù)。
2、nodejs中的阻塞型請(qǐng)求，容易成為性能的瓶頸。
3、對(duì)業(yè)務(wù)開(kāi)發(fā)人員來(lái)說(shuō)，曲線變長(zhǎng)
Nuxt.js 是一個(gè)基于 Vue.js 的通用應(yīng)用框架。適用于服務(wù)端渲染SSR的場(chǎng)景。
二、開(kāi)始使用
使用腳手架直接啟動(dòng)
$ npx create-nuxt-app <項(xiàng)目名>
應(yīng)用現(xiàn)在運(yùn)行在 http://localhost:3000 上運(yùn)行。
三、應(yīng)用
源代碼目錄
| 文件夾 | 名稱 | 說(shuō)明 |
|---|---|---|
| assets | 資源目錄 | assets 用于組織未編譯的靜態(tài)資源如 LESS、SASS 或 JavaScript |
| components | 組件目錄 | 用于組織應(yīng)用的 Vue.js 組件。 |
| layouts | 布局目錄 | 用于組織應(yīng)用的布局組件。 |
| middleware | 中間件 | 目錄用于存放應(yīng)用的中間件 |
| pages | 頁(yè)面目錄 | 用于組織應(yīng)用的路由及視圖。Nuxt.js 框架讀取該目錄下所有的 .vue 文件并自動(dòng)生成對(duì)應(yīng)的路由配置 |
| plugins | 插件目錄 | 用于組織那些需要在 根vue.js應(yīng)用 實(shí)例化之前需要運(yùn)行的 Javascript 插件。 |
| static | 靜態(tài)文件目錄 | 用于存放應(yīng)用的靜態(tài)文件，此類文件不會(huì)被 Nuxt.js 調(diào)用 Webpack 進(jìn)行構(gòu)建編譯處理。服務(wù)器啟動(dòng)的時(shí)候，該目錄下的文件會(huì)映射至應(yīng)用的根路徑 / 下。 |
| store | 狀態(tài)樹 | 目錄用于組織應(yīng)用的 Vuex 狀態(tài)樹 文件。 Nuxt.js 框架集成了 Vuex 狀態(tài)樹 的相關(guān)功能配置，在 store 目錄下創(chuàng)建一個(gè) index.js 文件可激活這些配置。 |
| nuxt.config.js 文件 | 個(gè)性化配置 | 用于組織 Nuxt.js 應(yīng)用的個(gè)性化配置，以便覆蓋默認(rèn)配置。 |
| package.json 文件 | 依賴關(guān)系 | 用于描述應(yīng)用的依賴關(guān)系和對(duì)外暴露的腳本接口。 |
別名
| 別名 | 目錄 |
|---|---|
~ 或 @
|
srcDir |
~~ 或 @@
|
rootDir |
默認(rèn)情況下，srcDir 和 rootDir 相同。
