之前我们完成了数据可视化大屏页面布局写法，今天我们来给数据大屏添加入场动画元素，让元素动起来。动画我们使用的是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)
喜欢
