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. windows server 2008 r2配置NTP时间服务器

    windows server 2008做NTP服务器与H3C网络设备组网首先WINDOWS SERVER 2008默认是关闭NTP服务的,需要通过修改注册表开启方法如下:--------------- ...

  2. 【数据结构】B树与B+树

    定义 B 树可以看作是对2-3查找树的一种扩展,即他允许每个节点有M-1个子节点. 根节点至少有两个子节点 每个节点有M-1个key,并且以升序排列 位于M-1和M key的子节点的值位于M-1 和M ...

  3. [LC] 48. Rotate Image

    You are given an n x n 2D matrix representing an image. Rotate the image by 90 degrees (clockwise). ...

  4. Docker私有仓库管理

    docker load -i registry.tar.gz docker run -d -p 5000:5000 --restart=always --name registry -v /opt/m ...

  5. 数据检索|文献检索|事实检索|yandex|Title vs topic|检索技术|检索技巧|

    信息检索: 信息检索原理是,将书写不规范的原始数据先存储,再通过归纳化or标准化手段进行拆分,便于用户搜索. 信息检索类型可依据数据内容进行分类,文献检索是通过输入关键字进入搜索引擎,搜索仅找到含有关 ...

  6. java增强型for循环

    http://blog.csdn.net/itmyhome1990/article/details/8797005

  7. rancher1.6高可用集群搭建

    rancher高可用集群搭建 一.搭建环境 1.安装系统 下载centos最新版, http://mirrors.sohu.com/centos/7/isos/x86_64/CentOS-7-x86_ ...

  8. setContext or setCharacterEncoding

    request.setCharacterEncoding()是设置从request中取得的值或从数据库中取出的值response.setContentType("text/html;char ...

  9. JS做深度学习1——偶然发现与入门

    JS做深度学习1--偶然发现与入门 不久前,我初次涉猎了Node.js,并且使用它开发了毕业设计的WEB模块,然后通过在Node中调用系统命令执行Python文件方式实现了深度学习功能模块的对接,Py ...

  10. iPhone7产业链不为人知的辛酸

    ​苹果金秋新品发布会是科技界的"春晚",年复一年地重复,难免会让人产生审美疲劳,但每逢中国教师节前后,全球的科技人士和媒体还是会不约而同地走到一起,等待苹果团队为之奉献出好的产品和 ...