Vue3:单页面应用程序

1、SPA

• 单页面应用程序（英文名：Single Page Application）简称 SPA，顾名思义，指的是一个 Web 网站中只有唯一的一个 HTML 页面，所有的功能与交互都在这唯一的一个页面内完成。

2、 SPA特点

• 单页面应用程序将所有的功能局限于一个 web 页面中，仅在该 web 页面初始化时加载相应的资源（ HTML、JavaScript 和 CSS）。
• 一旦页面加载完成了，SPA 不会因为用户的操作而进行页面的重新加载或跳转。而是利用 JavaScript 动态地变换HTML 的内容，从而实现页面与用户的交互。

3、SPA优点

• 良好的交互体验
  • 单页应用的内容的改变不需要重新加载整个页面
  • 获取数据也是通过 Ajax 异步获取
  • 没有页面之间的跳转，不会出现“白屏现象”
• 良好的前后端工作分离模式
  • 后端专注于提供 API 接口，更易实现 API 接口的复用
  • 前端专注于页面的渲染，更利于前端工程化的发展
• 减轻服务器的压力
  • 服务器只提供数据，不负责页面的合成与逻辑的处理，吞吐能力会提高几倍

4、SPA缺点

• 首屏加载慢
  ⚫路由懒加载
  ⚫ 代码压缩
  ⚫ CDN 加速
  ⚫ 网络传输压缩
• 不利于 SEO
  ⚫SSR 服务器端渲染

5、如何快速创建 vue 的 SPA 项目

• vue 官方提供了两种快速创建工程化的 SPA 项目的方式：
  ① 基于 vite 创建 SPA 项目
  ② 基于 vue-cli 创建 SPA 项目
  • 创建SPA项目