1、创建项目

npm init webpack project

3、下载   vue-skeleton-webpack-plugin 插件

npm install vue-skeleton-webpack-plugin

3、在src目录下添加entry-skeleton.js入口文件和要添加的骨架屏Skeleton.vue组件,附下图:

4、在build目录下创建 webpack.skeleton.conf.js 配置文件

5、在 webpack.dev.conf.js 和 webpack.prod.conf.js 中引入插件

const SkeletonWebpackPlugin = require('vue-skeleton-webpack-plugin')

并且在plugins中加入代码

new SkeletonWebpackPlugin({
webpackConfig: require('./webpack.skeleton.conf'),
quiet: true
}),

附下图:

6、npm run dev 跑起来查看

vue-cli2.0项目 添加骨架屏的更多相关文章

  1. Vue cli2.0 项目中使用Monaco Editor编辑器

    monaco-editor 是微软出的一条开源web在线编辑器支持多种语言,代码高亮,代码提示等功能,与Visual Studio Code 功能几乎相同. 在项目中可能会用带代码编辑功能,或者展示代 ...

  2. vue/cli2.0优化

    vue/cli2.0 脚手架 在项目写完了之后, 运行npm run build --report可以看出这个项目的资源占比情况.可以看出整个项目哪一个资源在整个项目占比最大.它会自动打开一个可视化的 ...

  3. vue-cli的项目加入骨架屏

    在原生APP中我们经常可以看到,打开app时候,内容还没出来,app会被别的内容替代,这样很好的提升了用户体验.那么在webApp中,我们如何避免白屏的尴尬情况呢?可以通过 vue-skeleton- ...

  4. vue 3.0 项目搭建移动端 (七) 安装Vant

    # 通过 npm 安装 npm i vant -S 安装完配置 babel.config.js module.exports = { presets: ['@vue/app'], plugins: [ ...

  5. Vue 2.0 项目在IE下显示空白

    新写的项目在 IE浏览器显示空白 解释一: Babel默认只转换新的JavaScript句法(syntax),而不转换新的API,比如Iterator.Generator.Set.Maps.Proxy ...

  6. vue 3.0 项目搭建移动端 (六) 命名路由同级控制

    const Tabbar = () => import('@/components/Tabbar'); export default [ { path: '/', name: 'home', c ...

  7. Vue 项目骨架屏注入与实践

    作为与用户联系最为密切的前端开发者,用户体验是最值得关注的问题.关于页面loading状态的展示,主流的主要有loading图和进度条两种.除此之外,越来越多的APP采用了“骨架屏”的方式去展示未加载 ...

  8. Vue单页面骨架屏实践

    github 地址: VV-UI/VV-UI 演示地址: vv-ui 文档地址:skeleton 关于骨架屏介绍 骨架屏的作用主要是在网络请求较慢时,提供基础占位,当数据加载完成,恢复数据展示.这样给 ...

  9. Vue页面骨架屏(二)

    实现思路 参考原文中在构建时使用 Vue 预渲染骨架屏一节介绍的思路,我将骨架屏也看成路由组件,在构建时使用 Vue 预渲染功能,将骨架屏组件的渲染结果 HTML 片段插入 HTML 页面模版的挂载点 ...

随机推荐

  1. Vue+elementUI build打包部署后字体图标丢失问题

    错误描述:Vue+elementUI  build打包部署后字体图标丢失,控制台显示文件element-icons.woff和element-icons.ttf文件404 错误展现: 控制台报错截图 ...

  2. Qt 信号阻塞和断开

    Qt程序中有时候不希望信号槽的触发,在某段流程结束之后,又需要继续回复信号槽状态,这时候可以用阻塞或者断开信号槽的方法来处理. 1. 阻塞方法:bool QObject::blockSignals(b ...

  3. vue项目根目录下index.html中的id="app",与src目录下的App.vue中的id="app"为什么不会冲突

    感谢:https://blog.csdn.net/qq_35624642/article/details/78243413 index.html <body> <div id=&qu ...

  4. 转发: python3.7下 Flask-SQLAlchemy中解决1366报错

    原链接:https://segmentfault.com/a/1190000010596306 详情: 安装MySQL驱动(我升级过Python,所以要再装一遍) 本想安装MySQL官方驱动mysql ...

  5. 在腾讯云服务器上安装JDK+Tomcat并启动tomcat

    由于Java web项目需要使用到tomcat所以决定在腾讯云服务器(centos7.X)上安装JDK和tomcat,来部署我们的项目. 准备工具: 云服务器:centos7.x+ 本地连接服务器:X ...

  6. OSCache使用指南

    OSCache是当前运用最广的缓存方案, JBoss Hibernate Spring 等都对其有支持,下面简单介绍一下OSCache的配置和使用过程. 1.安装过程 从http://www.open ...

  7. 月薪20k+的测试工程师都会这项技能!

    一说到测试,很多人认为就是在一直"点点点"找bug的重复性工作,这是早期手工测试给人的刻板印象,随着测试行业的发展,"会代码"越来越成为测试工程师的一个标签. ...

  8. kafka&&kafka-manager部署安装

    一.zk集群部署 二.kafka部署安装 1.创建kafka用户和日志路径,(直接执行) groupadd kafka useradd -g kafka kafka mkdir -p /web/kaf ...

  9. Shevon's Blog

    由于a link是disabled属性设置成true,只是颜色变灰色但是还能提交.要想不能提交,可以删除href属性:disable link[html] view plaincopyfunction ...

  10. scrapy爬虫-scrapy-redis分布式

    1.如何将一个scrapy爬虫项目修改成为一个简单的分布式爬虫项目 官方文档:https://scrapy-redis.readthedocs.io/en/stable/ 只用修改scrapy项目的两 ...