之前我们完成了数据可视化大屏页面布局写法,今天我们来给数据大屏添加入场动画元素,让元素动起来。动画我们使用的是wow.js来实现入场动画.
安装依赖
pnpm i wow.js
引入animate.css
main.js引入动画css
import 'wow.js/css/li...
yekong
2年前 (2023-03-30)
喜欢
vue3 数据可视化大屏项目开发前,我们需要先对大屏进行布局,把整体框架给搭建起来,然后一块作为,其他区域每一块作为一个组件单独来写,最后就像堆积木一样,将其放在对应的位置这样一个数据大屏页面就完成了。
头部和主体
从上面的数据大屏设计图来看,我们可以先分为两部分,头部和身体两...
yekong
2年前 (2023-03-30)
喜欢
vue可视化数据大屏 项目开发中,因为文件太多太大,服务器带宽又不够,导致项目加载缓慢,这时候我们可以将我们的资源文件托管到七牛cdn上,七牛cdn每个月可以免费使用10g的流量,如果超过了10g或者使用https的方式访问的话,我们就需要购买付费流量了。使用七牛云首先要有一个已...
yekong
2年前 (2023-03-29)
喜欢
因为gz压缩只能压缩代码,所以vue3 vite完成gz压缩后,文件仍然很大,项目中仍然有很多图片,以及字体文件等,这时候我们可以考虑使用cdn加速。
因为七牛每个月免费提供10g的流量,所以这里我们使用七牛云,在使用七牛云前,我们首先要注册一个七牛云
使用前我们要考虑自动化,编...
yekong
2年前 (2023-03-29)
喜欢
vue3 vite 数据可视化大屏 项目开发完成后,在打包时,考虑到文件体积,我们需要进行gz压缩,以节省带宽,提升加载速度。gz压缩会压缩js和css文件,我们可以进行对比文件大小查看效果。通过对比我们看到压缩效果很明显。压缩前最大的文件是1.2M,压缩后最大的文件是395k....
yekong
2年前 (2023-03-29)
喜欢
vue3 vite 数据可视化大屏 项目开发中需要和后端进行数据交互,这需要后端开发人员提供接口文档,前端开发人员根据接口文档进行接口调用。
安装依赖
要请求接口数据我们需要插件,这里我们使用axios来请求接口
使用pnpm来安装依赖
pnpm i axios
使用axios...
yekong
2年前 (2023-03-27)
喜欢