介绍 npm install vue-skeleton-webpack-plugin import Vue 得到& # 39;vue # 39;
import Skeleton 得到& # 39;。/Skeleton.vue& # 39;
Vue ({export default new
组件:{
骨架
},
模板:& # 39;& lt; skeleton /祝辞& # 39;
}) & lt; template>
& lt; div 类=皊keleton-wrapper"祝辞
& lt; style>
.skeleton {
填充:10 px;
}
.skeleton .skeleton-head,
.skeleton .skeleton-title,
.skeleton .skeleton-content-bottom,
.skeleton .skeleton-content {
背景:,rgba (194,, 207,, 214, 5);
背景图片:线性渐变(90度,rgba (255,, 255,, 255,, 0.15), 25%, transparent 25%);
background-size: 20 rem 20眼动;
动画:skeleton-stripes 1 s linear 无限;
保证金:0,auto 30 px;
text-align:中心;
颜色:,darkgray;
}
.skeleton-head {
宽度:100 px;
高度:60 px;
浮:左;
}
.skeleton-body {
margin-left: 110 px;
}
.skeleton-title {
宽度:90%;
高度:60 px;
行高:60 px;
}
.skeleton-content {
宽度:60%;
高度:40像素;
背景:,rgba(194,, 207,, 214。3) !重要;
}
.skeleton-content-bottom {
宽度:40%;
高度:40像素;
保证金:0,auto 30 px 20% !重要;
背景:,rgba(194,, 207,, 214。3) !重要;
}
@keyframes skeleton-stripes {
得到{
背景位置:0,0,;
}
用{
背景位置:20 rem 0;
}
}
& lt;/style>
& lt; header 类=皊keleton-header"祝辞& lt;/header>
& lt; section 类=皊keleton-block"祝辞
& lt; div 类=皊keleton"祝辞
& lt; div 类=皊keleton-head"祝辞& lt;/div>
& lt; div 类=皊keleton-body"祝辞
& lt; div 类=皊keleton-title"祝辞加载中& lt;/div>
& lt; div 类=皊keleton-content"祝辞& lt;/div>
& lt; div 类=皊keleton-content-bottom"祝辞& lt;/div>
& lt; div 类=皊keleton-content"祝辞& lt;/div>
& lt; div 类=皊keleton-content-bottom"祝辞& lt;/div>
& lt; div 类=皊keleton-content"祝辞& lt;/div>
& lt; div 类=皊keleton-content-bottom"祝辞& lt;/div>
& lt; div 类=皊keleton-content"祝辞& lt;/div>
& lt; div 类=皊keleton-content-bottom"祝辞& lt;/div>
& lt; div 类=皊keleton-content"祝辞& lt;/div>
& lt;/div>
& lt;/div>
& lt;/section>
& lt;/div>
& lt;/template>
& lt; script>
export default {
名称:,& # 39;骨架# 39;
}
& lt;/script> & # 39; use 严格# 39;;
const path =,要求(& # 39;path & # 39;)
const merge =,要求(& # 39;webpack-merge& # 39;)
const baseWebpackConfig =,要求(& # 39;。/webpack.base.conf& # 39;)
const nodeExternals =,要求(& # 39;webpack-node-externals& # 39;)
function 解决(dir), {
return path.join (__dirname, dir)
}
时间=module.exports 合并(baseWebpackConfig, {
目标:& # 39;节点# 39;
devtool:假的,
条目:{//指向自己的skeleton.js路径
应用:解决(& # 39;. ./src/渲染器/框架/skeleton.js& # 39;)
},
输出:,Object.assign ({}, baseWebpackConfig.output,, {
libraryTarget: & # 39; commonjs2& # 39;
}),
外部:nodeExternals ({
白名单:/美元\ . css
}),
插件:[]
})
使用vue-cli怎么构建一个骨架屏?很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。
安装vue-skeleton-webpack-plugin
创建文件skeleton.js和skeleton.vue
骨架。js
skeleton.vue
我的skeleton.vue不知为何& lt; style>标签写在外部没有加载进去,故写到& lt; template>内
样式和模板可以自己修改
在构建目录下创建webpack.skeleton.conf。js
看完上述内容是否对您有帮助呢?如果还想对相关知识有进一步的了解或阅读更多相关文章,请关注行业资讯频道,感谢您对的支持。
