vue的简单学习_大屏

一、 vue-cli的配置

1.1 vue-cli的安装

npm install -g @vue/cli
# 或
yarn global add @vue/cli
# 使用npm install -g @vue/cli安装出现npm warn错误。通过npm install -g yarn 然后使用第二条命令下载。下载后并没有将vue加到环境变量中，需要在c盘中找到路径加到环境变量C:\Users\用户名\AppData\Local\Yarn\Data\global\node_modules\.bin

1.2 查看vue-cli版本

vue	--version/vue -V

1.3 创建项目

# 进入项目目录
vue create 项目名称
#--> 手动设置
#-->选择路由（Router）和Vuex
#-->选择vue2
#-->不适用history模式
#--->添加特定的配置文件
#--->不将项目保存为预设
# 项目的启动
# 进入项目
cd 项目
yarn serve
npm run serve

1.4 DataV（大屏数据展示组件库）

网址：https://datav.jiaminghi.com

1.4.1 安装DataV

# 安装DataV
cnpm i @jiaminghi/data-view -S/yarn add @jiaminghi/data-view -S
# -S:在生产环境下
# -D:在开发环境下
#app.vue ---->main.js设置 ---->路由设置---->views设置

1.4.2 全屏

# 全屏容器
#DataV网站--->全屏容器
# 边框

1.4.3 一行二等分

1.4.4 二行二等分

 
      

        

          dv-border-box-1
          dv-border-box-1
        
        

          dv-border-box-1
          dv-border-box-1
        
      

1.4.5 三行三分

        

          dv-border-box-1
          dv-border-box-1
        
        

          dv-border-box-1
        
        

          dv-border-box-1
          dv-border-box-1
        
      

1.4.6 柱图

		          
		            
		          
 
 # 数据
 export default{
  name: 'HomeView',
  data(){
    return{
      config:{
        data: [
              {
                name: '南阳',
                value: 167
              },
              {
                name: '周口',
                value: 67
              },
              {
                name: '漯河',
                value: 123
              },
              {
                name: '郑州',
                value: 55
              },
              {
                name: '西峡',
                value: 98
              }
            ]
      }
    }
  }
}

1.4.7 锥形柱图

          
            
          
 
 #数据,注意图片的导入方式
 export default{
  name: 'HomeView',
  data(){
    return{
      config1:{
        data: [
              {
                name: '周口',
                value: 55
              },
              {
                name: '南阳',
                value: 120
              },
              {
                name: '西峡',
                value: 71
              },
              {
                name: '驻马店',
                value: 66
              },
              {
                name: '新乡',
                value: 80
              },
              {
                name: '信阳',
                value: 35
              },
              {
                name: '漯河',
                value: 15
              }
            ],
            img: [
              require('../assets/img/1st.png'),
              require('../assets/img/2st.png'),
              require('../assets/img/3st.png'),
              require('../assets/img/4st.png'),
              require('../assets/img/5st.png'),
              require('../assets/img/6st.png'),
              require('../assets/img/7st.png')
            ]
      }
    }
  }
}

1.4.8 标题

# 装饰
# 镜像transform:rotateY(180deg)

        

          
        
        

          

              
              

                智慧大屏
              
              
          
        
        

          
        
      

1.4.9 拆分

1.4.10 组件变为公共

1.4.11 数据

1.5 ECharts

1.5.1 安装

yarn add  echarts -S

1.5.2 准备容器

1. 准备容器

# vue中需要修改

2. 初始化

1.6 实时渲染（WebSocket）

1. 服务端向客户端推送消息，http要由客户端（浏览器）主动发起；即时通信，实时数据，订阅推送