脚本宝典收集整理的这篇文章主要介绍了Vue页面骨架屏注入实践,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
作为与用户联系最为密切的前端开发者,用户体验是最值得关注的问题。关于页面loading状态的展示,主流的主要有loading图和进度条两种。除此之外,越来越多的APP采用了“骨架屏”的方式去展示未加载内容,给予了用户焕然一新的体验。随着SPA在前端界的逐渐流行,首屏加载的问题也在困扰着开发者们。那么有没有一个办法,也能让SPA用上骨架屏呢?这就是这篇文章将要探讨的问题。
文章相关代码已经同步到Github,欢迎查阅~
简单来说,骨架屏就是在页面内容未加载完成的时候,先使用一些图形进行占位,待内容加载完成之后再把它替换掉。
这个技术在一些以内容为主的APP和网页应用较多,接下来我们以一个简单的Vue工程为例,一起探索如何在基于Vue的SPA项目中实现骨架屏。
为了简单起见,我们使用vue-cli
搭配webpack-simple
这个模板来新建项目:
vue init webpack-simple vue-skeleton
这时我们便获得了一个最基本的Vue项目:
.
├── package.json
├── src
│ ├── App.vue
│ ├── assets
│ └── main.js
├── index.html
└── webpack.conf.js
安装完了依赖以后,便可以通过npm run dev
去运行这个项目了。但是,在运行项目之前,我们先看看入口的html文件里面都写了些什么。