Vue.js 如何实现骨架屏？-JavaScript中文网-JavaScript教程资源分享门户

Vue.js 如何实现骨架屏？

AI 编程助手，豆包旗下的编程助手，提供智能补全、智能预测、智能问答等能力，节省开发时间，释放脑海中的创造力，支持 VSCode，点击体验 AI

骨架屏（Skeleton Screen）是一种常见的加载动画效果，可以增强用户等待页面加载的体验。在前端开发中，Vue.js 是一款流行的 JavaScript 框架，它提供了很多可用于实现骨架屏的功能。

什么是骨架屏

骨架屏是一种以占位符代替实际内容的加载动画效果。它使用页面实际内容的布局、颜色等元素，来生成一个类似于待加载内容的框架。这个框架呈现的形式比如是一个矩形框，该矩形框的大小、位置等和实际内容保持一致。在实际内容加载完成前，骨架屏会展示在页面上，提高页面的可用性。

Vue.js 如何实现骨架屏

使用 vue-skeleton-webpack-plugin

vue-skeleton-webpack-plugin 是一个基于 Vue.js 的插件，用于自动生成骨架屏，它可以帮助开发者根据路由或者组件生成骨架屏模板，并通过 SSR 进行预渲染，提高了 SEO 和首屏加载的效率。

使用 vue-skeleton-webpack-plugin 首先需要安装该插件，安装命令如下：

--- - --------------------------- --

安装完成后，可以在 webpack 配置文件中添加以下代码：

----- --------------- - --------------------------------------

-------------- - -
  -- ---
  ----------------- -
    -------- -
      --- -----------------
        -------------- ----------------------------------------------
        ------ ----- -- --------
        ------- -
          ----- ----------
          ------- - -- ----------
            - ----- ------- --
            - ----- -------- -
          -
        -
      --
    -
  -
-

在这个配置对象中，可以设置路由、Webpack 配置信息和是否输出日志信息。配置完成后，插件将自动生成对应的骨架屏模板。关于如何编写骨架屏模板，下文中会进行详细介绍。

使用 vue-content-placeholder

vue-content-placeholder 是一个基于 Vue 的轻量级骨架屏插件，通过使用基础组件和槽内容管理，提供了高度的可定制化性。开发者可以自定义样式、持续时间、感官反馈等内容。

使用 vue-content-placeholder 首先需要安装该插件，安装命令如下：

--- - ----------------------- --

安装完成后，在 Vue.js 组件中可以使用以下代码：

----------
  -----
    ------------------- --------------
      --------- --------------- ----- ---
        ---- ----------- --- -----------
          ------- ---
        ------
        ---- ---------------- --- --------
          ------- ---
        ------
        ---- -------
          ----- ---
        ------
      -----------
    ---------------------
  ------
-----------

--------
------ ------------------ ---- -------------------------

------ ------- -
  ----------- -
    ------------------
  -
-
---------

-------
------------------ -
  ----------- --------
  ---------- --------- ---- -- -------- ------ ---- ----------
-
------------------------- -
  -------- ---
  -------- -------------
  ------ ----
  ------- -----
  ------------- ----
  ----------- --------- ---- ---- -----
  ---------- -------- ---- -- -------- ------ ---- ----------
-
------------------------------- -
  ------ -----
-
---------- -------- -
  -- -
    ------------- ----
  -
-
---------- --------- -
  ---- -
    -------- ---
  -
  -- -
    -------- ---
  -
-
--------

在这个代码中，可以使用 ContentPlaceholder 组件包裹一个自定义的占位符。ContentPlaceholder 组件可以接受一个“placeholder”插槽，用于自定义模板。对于模板中的三种状态（“loading”、“done”、“error”），可以自定义对应的内容和样式。在此基础上，使用者可以自定义背景、动画效果等，实现更高度的定制化。

编写骨架屏模板

无论是 vue-skeleton-webpack-plugin 还是 vue-content-placeholder，生成骨架屏模板都需要编写代码，以下是几个编写骨架屏模板的技巧：

选择页面中最重要的元素，先生成骨架屏样式，以确保在加载时首先呈现最关键的内容。
在骨架屏中增加适量的动画和渐进式加载效果，以为用户提供更好的交互体验。
避免使用大量样式表，以避免额外的网络请求和额外的渲染时间。
使用渐进式渲染，让页面逐渐展现内容，降低首屏加载所需时间，优化用户体验。

结论

骨架屏是一个适用于增强用户等待体验的前端技术。Vue.js 提供了对应的插件和组件，可以帮助开发者快速地生成骨架屏模板，提高页面首屏渲染效率。在编写骨架屏模板时，开发者可以结合页面布局、色彩等特点，实现更高度的可定制化。

来源：JavaScript中文网，转载请联系管理员！本文地址：https://www.javascriptcn.com/post/671c79b39babaf620fb0ef57