vue项目中使用骨架屏的方法

现在的应用开发，基本上都是前后端分离的，前端主流框架有spa、mpa等，那么解决页面渲染、白屏时间成为首要关注的点

webpack可以按需加载，减小首屏需要加载代码的体积；

使用cdn技术、静态代码等缓存技术，可以减小加载渲染的时长

问题：但是首页依然存在加载、渲染等待时长的问题。那么如何从视觉效果上减小首屏白屏的时间呢？

骨架屏：举个例子：其实就是在模版文件中id=app容器下面写想要展示的效果，在new vue(option)之后，该id下的内容就被替换了( 这时候，可能vue编译生成的内容还没有挂载。因为new vue的时候会进行一系列的初始化，这也需要耗费时间的)。这样就可以从视觉上减小白屏的时间

骨架屏的实现方式

1、直接在模版文件id=app容器下面，写进想要展示的效果html

2、直接在模板文件id=app容器下面，用图片展示

3、使用vue ssr提供的webpack插件

4、自动生成并且自动插入静态骨架屏

方式1和方式2存在的缺陷：针对不同入口，展示的效果都一样，导致不能灵活的针对不同的入口，展示不同的样式

方式3可以针对不同的入口展示不同的效果。（实质也是先通过ssr生成一个json文件，然后将json文件内容注入到模板文件的id=app容器下）

方案一、直接在模版文件id=app容器下面，写进想要展示的效果html

在根目录的模版文件内写进内容，如红色圈出来的地方

在浏览器打开项目

在调用new vue之前的展示效果(只是做了个简单效果，不喜勿喷)：

可以看到elements中id=app的容器下内容，就是我们写进的骨架屏效果内容

在看下调了new vue之后的效果，id=app容器下的内容被vue编译生成的内容替换了

方案二、直接在模板文件id=app容器下面，用图片展示(这个就不做展示了)

方案三、使用vue ssr提供的webpack插件：即用.vue文件完成骨架屏

在方案一的基础上，将骨架屏的代码抽离出来，不在模版文件里面书写代码，而是在vue文件里面书写效果代码，这样便于维护

1、在根目录下建一个skeleton文件夹，在该目录下创建文件app.vue文件（根组件，类似vue项目的app.vue）、home.skeleton.vue(首页骨架屏展示效果的代码，类似vue项目写的路由页面)、skeleton-entry.js(入口文件类似vue项目的入口文件)、plugin/server-plugin.js(vue-server-renderer包提供了server-plugin插件，从里面将代码拷贝出来)

home.skeleton.vue(首页骨架屏展示效果的代码)

app.vue(根组件)

skeleton-entry.js(入口文件)

plugin/server-plugin.js(vue-server-renderer包提供了server-plugin插件)

2、新建一个骨架屏构建配置文件：build/webpack.skeleton.conf.js，这个文件配合vue-server-renderer插件，将app.vue内容构建成单个json格式的文件

3、使用webpack-cli运行文件webpack.skeleton.conf.js，生成skeleton.json文件，放置在文件夹skeleton下

在package.json文件里面书写运行命令：create-skeleton

在控制台上运行命令：

文件夹skeleton下就会多出skelleton.json文件

4、将生成的skeleton.json内容注入到根目录下的index.html(模版文件)

1）在文件夹skeleton下新建skeleton.js

2）添加运行命令：fill-skeleton

3）在控制台上运行该命令，则skeleton.json文件内容被填充至根目录下的模板文件index.html了

参考文章：

利用vue ssr 做骨架屏注入：

在vue中实现骨架屏：

vue ssr渲染踩过的坑：

到此这篇关于vue项目中使用骨架屏的方法的文章就介绍到这了,更多相关vue 骨架屏内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！