单页面应用程序
单页应用 (Single-Page application,缩写为 SPA)。
一些应用在前端需要具有丰富的交互性、较深的会话和复杂的状态逻辑。构建这类应用的最佳方法是使用这样一种架构:Vue 不仅控制整个页面,还负责处理抓取新数据,并在无需重新加载的前提下处理页面切换。
- 将所有功能局限于一个web页面中,仅在该web页面初始化时加载相应的资源;
- 一旦加载完成,SPA不会再因用户的操作而刷新。而是利用JS动态变换页面内容。
SPA的优点
- 良好的交互体验
- 内容改变不需要重新加载整个页面;
- 数据通过Ajax异步获取;
- 没有页面之间的跳转,不会出现“白屏”现象。
- 良好的前后端分离模式
- 后端专注API接口实现,提高API复用;
- 前端专注页面的渲染,更利于前端工程化发展;
- 减轻服务器的压力
- 服务器只提供数据,不负责合成与逻辑处理,提高吞吐量。
SPA的缺点
- 首屏加载慢
- 路由懒加载;
- 代码压缩;
- CDN加速;
- 网络传输压缩;
- 不利于SEO
- SSR服务器端喧染。
创建Vue的SPA项目
Vue提供了两种创建SPA的方式:
- vite
- vue-cli
对比项 | vite | vue-cli |
---|---|---|
支持的vue版本 | 3.x | 3.x & 2.x |
是否基于webpack | F | T |
运行速度 | 快 | 较慢 |
功能完整 | 小巧(逐渐完善) | 大全 |
企业应用 | 不建议 | 建议 |