一个大屏监控的项目

Posted 2020-12-05 秀&莹&锐

写大屏监控，本人选择的是用vue、element ui、echarts、axios、vueg来构建的。

 1 vue init webpack my-project
 2 
 3 //安装依赖
 4 cd my-project
 5 cnpm install
 6 
 7 //加入elementUI
 8 cnpm i element-ui -S
 9 
10 //加入echarts
11 cnpm install echarts -S
12 
13 //加入 axios
14 cnpm install axios -S
15 
16 //加入vueg
17 cnpm i vueg -S

vueg是一个切换页面时转场的效果

1 import vueg from ‘vueg‘
2 import ‘vueg/css/transition-min.css‘
3 Vue.use(vueg, router);//←注意这一句应该在router实例化之后

为需要转场动画的<router-view>添加v-transition，如：

<router-view v-transition />

需要什么样的效果，就在那个页面的data中添加数据，如：

1  data () {
2     return {
3       vuegConfig: {
4         forwardAnim: ‘touchPoint‘,//转场效果
5         duration: ‘.3‘,
6         disable:false
7       }
8     }
9   }

vueg转场效果还有别的，如果需要，自己去找效果：https://github.com/jaweii/vueg。

我这个项目是3840*1920的大屏监控如有需要看的，请点击https://github.com/mengxiaobo130401/screens_monitor