vue-cli2.0项目 添加骨架屏
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项目 添加骨架屏的更多相关文章
- Vue cli2.0 项目中使用Monaco Editor编辑器
monaco-editor 是微软出的一条开源web在线编辑器支持多种语言,代码高亮,代码提示等功能,与Visual Studio Code 功能几乎相同. 在项目中可能会用带代码编辑功能,或者展示代 ...
- vue/cli2.0优化
vue/cli2.0 脚手架 在项目写完了之后, 运行npm run build --report可以看出这个项目的资源占比情况.可以看出整个项目哪一个资源在整个项目占比最大.它会自动打开一个可视化的 ...
- vue-cli的项目加入骨架屏
在原生APP中我们经常可以看到,打开app时候,内容还没出来,app会被别的内容替代,这样很好的提升了用户体验.那么在webApp中,我们如何避免白屏的尴尬情况呢?可以通过 vue-skeleton- ...
- vue 3.0 项目搭建移动端 (七) 安装Vant
# 通过 npm 安装 npm i vant -S 安装完配置 babel.config.js module.exports = { presets: ['@vue/app'], plugins: [ ...
- Vue 2.0 项目在IE下显示空白
新写的项目在 IE浏览器显示空白 解释一: Babel默认只转换新的JavaScript句法(syntax),而不转换新的API,比如Iterator.Generator.Set.Maps.Proxy ...
- vue 3.0 项目搭建移动端 (六) 命名路由同级控制
const Tabbar = () => import('@/components/Tabbar'); export default [ { path: '/', name: 'home', c ...
- Vue 项目骨架屏注入与实践
作为与用户联系最为密切的前端开发者,用户体验是最值得关注的问题.关于页面loading状态的展示,主流的主要有loading图和进度条两种.除此之外,越来越多的APP采用了“骨架屏”的方式去展示未加载 ...
- Vue单页面骨架屏实践
github 地址: VV-UI/VV-UI 演示地址: vv-ui 文档地址:skeleton 关于骨架屏介绍 骨架屏的作用主要是在网络请求较慢时,提供基础占位,当数据加载完成,恢复数据展示.这样给 ...
- Vue页面骨架屏(二)
实现思路 参考原文中在构建时使用 Vue 预渲染骨架屏一节介绍的思路,我将骨架屏也看成路由组件,在构建时使用 Vue 预渲染功能,将骨架屏组件的渲染结果 HTML 片段插入 HTML 页面模版的挂载点 ...
随机推荐
- django项目导航页_20191128
django项目导航页_20191128 第一步:python-django电商项目-需求分析架构设计数据库设计_20191115 python-django-linux上mysql的安装和配置_20 ...
- 转:zabbix 2.4.4 更换 logo
zabbix 2.4.4 更换 logo 想把 zabbix 的 logo 改为自己公司的. 把更改过程做一下记录 先找到修改文件的目录 zabbix 版本 2.4.4 操作系统 linux 目录定位 ...
- MicrosoftOfficeProfessionalPlus2013傻瓜式激活工具
用微软的office系列,总是提示需要输入秘钥,直接找个破解软件破解算了. 破解软件地址:http://www.3322.cc/soft/10037.html 1.下载解压: 2.点击office系列 ...
- 吴裕雄--天生自然 R语言开发学习:分类
#-----------------------------------------------------------------------------# # R in Action (2nd e ...
- Python---11模块
在计算机程序的开发过程中,随着程序代码越写越多,在一个文件里代码就会越来越长,越来越不容易维护. 为了编写可维护的代码,我们把很多函数分组,分别放到不同的文件里,这样,每个文件包含的代码就相对较少,很 ...
- windows 下 基于express搭建 https协议的网站
参考 https://blog.csdn.net/xingyanchao/article/details/79362443 问题在于生成SSL证书的时候Windows环境下会报错 解决方案 参考 ht ...
- redis实现二级缓存
缓存的作用就是降低数据库的使用率,来减轻数据库的负担.我们平常的操作一般都是查>改,所以数据库的有些查操作是重复的,如果一直使用数据库就会有负担.Mybatis也会做缓存,也会有一级缓存和二级缓 ...
- 一款属于自己的笔记本【vue+gin+elementUI前后端分离开发部署开源项目】
前言 我为什么要写一个个人的云笔记? (⊙o⊙)-额额额
- 给你的Kubernetes集群建一个只读账户(防止高管。。。后)
给你的Kubernetes集群建一个只读账户 需求:我们知道搭完k8s集群会创建一个默认的管理员kubernetes-admin用户该用户拥有所以权限,有一天开发或测试的同学需要登录到k8s集群了解业 ...
- CSS——NO.4(继承、层叠、特殊性、重要性)
*/ * Copyright (c) 2016,烟台大学计算机与控制工程学院 * All rights reserved. * 文件名:text.cpp * 作者:常轩 * 微信公众号:Worldhe ...