vue-cli2添加骨架屏

最新推荐文章于 2024-08-07 10:20:23 发布

MiemieWan

最新推荐文章于 2024-08-07 10:20:23 发布

阅读量651

点赞数

分类专栏： vue 文章标签： vue.js javascript node.js

本文链接：https://blog.csdn.net/MiemieWan/article/details/120067362

版权

vue 专栏收录该内容

28 篇文章 0 订阅

订阅专栏

一、安装配置骨架屏插件

1.安装插件page-skeleton-webpack-plugin

npm i --save page-skeleton-webpack-plugin

2.配置插件
在webpack.base.conf.js文件中引入文件，进行配置：

const { SkeletonPlugin } = require("page-skeleton-webpack-plugin");
module.exports = {
  plugins: [
	new SkeletonPlugin({
      pathname: path.resolve(__dirname, `../shell`), 
      staticDir: path.resolve(__dirname, "../dist"), 
      routes: ["/", "/couse/detail"]
    })
  ]
}

配置参数：

配置项	数据类型	作用
pathname	String	开发环境中点击保存按钮生成的骨架屏代码的保存路径
staticDir	String	打包时生成的骨架屏的静态资源文件(官方文档指导要和webpack打包输出目录一致)
routes	Array	需要生成骨架屏的路由(和项目中路由配置的path一致)

3.运行
开发环境中的webpack配置完成以后，使用npm run dev运行项目。
若中途出现报错：
在这里插入图片描述
则安装依赖webpack-log：

npm i webpack-log

接着使用npm run dev运行项目。

4.查看骨架屏
浏览器打开项目，打开控制台，若有出现如下笑脸打印条，则证明插件配置成功。
在这里插入图片描述
在控制台中输入toggleBar，回车，页面顶部会出现蓝紫色的条子：

点击蓝紫色条子会弹出一个骨架屏页面：

最左边显示你的页面，中间是该页面的骨架屏，右边是骨架屏代码，可以对代码进行修改，右上角蓝色按钮可以保存该骨架屏文件，供生产环境使用。保存位置是刚才在webpack.base.conf.js中设置的pathname的位置"../shell"。
在这里插入图片描述
右上角三个按钮：

5.生产环境下显示骨架屏
若想在生产环境下显示骨架屏还需多几个步骤：
在模板文件./index.html中添加特有注释：，指示骨架屏渲染位置。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"
    />
    <title>骨架屏</title>
  </head>
  <body>
    <div id="app">
      <!-- shell -->
    </div>
    <!-- built files will be auto injected -->
  </body>
</html>

由于vue-cli2中webpack的html-webpack-plugin默认压缩移除注释，所以要将其关掉，避免我们的注释被移除掉。
webpack.prod.conf.js中将HtmlWebpackPlugin插件中的minify.removeComments从true改为false

new HtmlWebpackPlugin({
   minify: {
     removeComments: false   // 压缩移除注释的配置项修改为false
},

打包项目：npm run build
此时如果直接开启本地文件，是不会显示骨架屏的。需要将项目部署到服务器中。这里我使用wamp。
部署好项目后用浏览器打开，打开控制台，设置下网络速度，将网络设为慢速3G，以便我们看到骨架屏：
在这里插入图片描述
设置好后刷新界面，可以看到先出现骨架屏，再出现页面：