在Vue项目中初始化一个Webpack项目，通常使用Vue CLI（Command Line Interface）工具来帮助我们快速创建和配置一个基本的Webpack项目。Vue CLI提供了一套预定义的项目模板和脚手架，方便我们开始一个新的Vue项目。
以下是使用Vue CLI...
2年前 (2023-07-20)
喜欢
vue 数据可视化大屏 项目中，按照效果图，需要实现一组气泡效果，气泡内有数字以及标题。
这里我们需要实现这里出气泡的大小，位置以及气泡的颜色等信息。将气泡渲染出来后，为了让页面看起来更生动，我们使用gsap来给组件添加一个上下轻微晃动的效果。
效果截图
效果动画
组件代码
...
2年前 (2023-07-14)
喜欢
vue项目开发中，使用视频作为全屏背景的时候，当调整页面大小的时候，会导致视频位置偏移，解决思路，当窗口变化后，重新获取窗口大小，赋值给视频的父div即可。
实例代码
<template>
<div class="shipinbg" r...
2年前 (2023-06-25)
喜欢
vue 数据可视化大屏 项目开发中，为了数据安全，需要对数据进行加解密，后端返回加密数据，前端进行解密然后做后续处理。
安装依赖
因为数据是长数据，所以这里直接使用的是encryptlong
pnpm i encryptlong
引用
import JSEncrypt from...
2年前 (2023-06-15)
喜欢
vue数据可视化大屏项目开发中，有一个区域数据很多,需要滚动到底部后进行数据分页加载。
div部分
<div class="cBodys hideScrollBar" ref="cBodys">
<div clas...
2年前 (2023-06-13)
喜欢
vue外包项目 中在与后端进行数据调用的时候，会遇到需要二次处理后端返回数据的情况，比如对一组数据进行排序，这时候我们可以通过一个方法对数据进行排序处理。
从小到大排序
function sortKey(array, key) {
return array.sort(fu...
2年前 (2023-06-11)
喜欢
vue3 数据大屏 项目开发中，需要一个世界国家列表并且可以通过输入关键字进行筛选的功能，这里使用element-plus el-select组件来实现的我们的功能。
要筛选的话，首先需要整理国家的名称，这里整理了中英文国家数据
使用组件传值
<template>
...
2年前 (2023-05-26)
喜欢
vue3 数据可视化大屏 开发中，需要进行内容切换，因为很多个模块都需要切换，所以把这一块的代码单独抽离出来不用再额外花费精力来关心切换了。这样就只需要集中精力处理逻辑即可。
代码
<template>
<div class="itemOutBo...
2年前 (2023-05-25)
喜欢
vue 数据可视化大屏开发中，因为大屏都是一个一个的模块组成，除了实现效果外，我们还需要考虑组件的可移植性和复用性，避免因为数据导致组件使用混乱。尽可能做到组件拿来即用。
请求接口
首先组件封装，当前组件我们只做一件事请求接口，把接口的数据传给echarts子组件。
<te...
2年前 (2023-04-10)
喜欢
在vue项目中，echarts图表为了看起来酷炫，会使用渐变色效果，我们可以通过vue的计算属性来生成渐变色的代码，然后赋值给echarts.
生成渐变色
computed: {
colorList: function () {
var list = [{
...
2年前 (2023-04-10)
喜欢
