一、概述
通常使用 VUE 開發(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ì)搜索引擎不友好。
因而開發(fā)方式又討論到SSR方案（服務(wù)端渲染）负敏，這是傳統(tǒng)的開發(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ù)開發(fā)人員來(lái)說(shuō)微猖，曲線變長(zhǎng)
Nuxt.js 是一個(gè)基于 Vue.js 的通用應(yīng)用框架。適用于服務(wù)端渲染SSR的場(chǎng)景缘屹。
二凛剥、開始使用
使用腳手架直接啟動(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 相同。
