優(yōu)點(diǎn)：1、良好的交互體驗(yàn)；2、前后端分離，減少開(kāi)發(fā)效率；3、架構(gòu)清晰；4、減輕服務(wù)器的壓力。缺點(diǎn)：1、對(duì)SEO并不友好；2、可能出現(xiàn)首屏加載時(shí)間過(guò)長(zhǎng)的問(wèn)題；3、頁(yè)面復(fù)雜度提高，復(fù)雜邏輯程度成倍。

本教程操作環(huán)境：windows7系統(tǒng)、vue2.9.6版，DELL G3電腦。

什么是SPA?

單頁(yè) Web 應(yīng)用 (single-page application 簡(jiǎn)稱(chēng)為 SPA) 是一種特殊的 Web 應(yīng)用。它將所有的活動(dòng)局限于一個(gè)Web頁(yè)面中，僅在該Web頁(yè)面初始化時(shí)加載相應(yīng)的HTML、JavaScript 和 CSS。一旦頁(yè)面加載完成了， SPA不會(huì)因?yàn)橛脩?hù)的操作而進(jìn)行頁(yè)面的重新加載或跳轉(zhuǎn)。取而代之的是利用 JavaScript 動(dòng)態(tài)的變換HTML的內(nèi)容，從而實(shí)現(xiàn)UI與用戶(hù)的交互。由于避免了頁(yè)面的重新加載，SPA 可以提供較為流暢的用戶(hù)體驗(yàn)。

SPA的優(yōu)點(diǎn)是什么？

1、良好的交互體驗(yàn)

因?yàn)槭蔷植夸秩?，每個(gè)部分是單獨(dú)的模塊。避免了不必要的跳轉(zhuǎn)和重復(fù)渲染

2、前后端分離 減少開(kāi)發(fā)效率。

3、架構(gòu)清晰。

4、減輕服務(wù)器的壓力。

服務(wù)器只需要提供數(shù)據(jù)，不需要管前端展示邏輯和頁(yè)面合成，提高了性能。

5、共用一套后端程序代碼。

SPA的缺點(diǎn)是什么？

1、對(duì)SEO并不友好

2、可能出現(xiàn)首屏加載時(shí)間過(guò)長(zhǎng)的問(wèn)題。

（為實(shí)現(xiàn)單頁(yè)面。需要在加載頁(yè)面使將js css統(tǒng)一加載，部分頁(yè)面按需加載）

因首屏加載時(shí)間過(guò)長(zhǎng)導(dǎo)致白屏，如何解決？可以利用骨架屏效

3、頁(yè)面復(fù)雜度提高。

復(fù)雜邏輯程度成倍。

【