引导者vue-skeleton-webpack-plugin
简介
vue-skeleton-webpack-plugin 是一个 webpack 插件，用于生成 vue 组件的骨架屏。骨架屏是在页面加载时显示的占位符内容，可以提升用户体验，减少长时间等待的焦虑感。
一级标题：安装
```bash npm install --save-dev vue-skeleton-webpack-plugin ```或```bash yarn add --dev vue-skeleton-webpack-plugin ```
二级标题：webpack 配置
```javascript const VueSkeletonWebpackPlugin = require('vue-skeleton-webpack-plugin');module.exports = {plugins: [new VueSkeletonWebpackPlugin({// skeleton 组件文件路径vueComponent: path.resolve(__dirname, './src/components/Skeleton.vue'),}),], }; ```
一级标题：使用
将生成的骨架屏组件作为占位符使用：```vue
二级标题：自定义选项
vueComponent:
骨架屏组件文件路径（
必填
）
loading:
指定骨架屏显示的条件（布尔值）
skeletonClass:
骨架屏组件的 CSS class
skeletonProps:
传递给骨架屏组件的 props
extractCSS:
是否将骨架屏样式提取到外部 CSS 文件
webpackConfig:
自定义 webpack 配置对象
一级标题：优势
提高用户体验：
减少长时间等待引起的焦虑感。
提升页面加载速度：
骨架屏提前加载，避免加载实际内容时的空白页面。
支持 Vue.js：
与 Vue.js 深度集成，使用简单。
可定制：
可自定义骨架屏样式、组件和选项。
**vue-skeleton-webpack-plugin****简介**vue-skeleton-webpack-plugin 是一个 webpack 插件，用于生成 vue 组件的骨架屏。骨架屏是在页面加载时显示的占位符内容，可以提升用户体验，减少长时间等待的焦虑感。**一级标题：安装**```bash
npm install --save-dev vue-skeleton-webpack-plugin
```或```bash
yarn add --dev vue-skeleton-webpack-plugin
```**二级标题：webpack 配置**```javascript
const VueSkeletonWebpackPlugin = require('vue-skeleton-webpack-plugin');module.exports = {plugins: [new VueSkeletonWebpackPlugin({// skeleton 组件文件路径vueComponent: path.resolve(__dirname, './src/components/Skeleton.vue'),}),],
};
```**一级标题：使用**将生成的骨架屏组件作为占位符使用：```vue
