vue的简单学习_大屏

颜大哦2024-02-05 17:22

一、 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 一行二等分

<template>
  <div class="content bg">
    <dv-full-screen-container>
      <!-- 一行二等分 -->
      <div class="module-box">
        <div style="flex: 0 1 50%;">
          <dv-border-box-8 style="width: 100%;height: 200px;">dv-border-box-1</dv-border-box-8>
        </div>
        <div style="flex: 0 1 50%;">
          <dv-border-box-8 style="width: 100%;height: 200px;">dv-border-box-1</dv-border-box-8>
        </div>
      </div>
    </dv-full-screen-container>
  </div>
</template>

1.4.4 二行二等分

 <!-- 两行二等分 -->
      <div class="module-box">
        <div style="flex: 0 1 50%;">
          <dv-border-box-8 style="width: 100%;height: 100px;">dv-border-box-1</dv-border-box-8>
          <dv-border-box-8 style="width: 100%;height: 100px;">dv-border-box-1</dv-border-box-8>
        </div>
        <div style="flex: 0 1 50%;">
          <dv-border-box-8 style="width: 100%;height: 100px;">dv-border-box-1</dv-border-box-8>
          <dv-border-box-8 style="width: 100%;height: 100px;">dv-border-box-1</dv-border-box-8>
        </div>
      </div>

1.4.5 三行三分

<div class="module-box">
        <div style="flex: 0 1 25%;">
          <dv-border-box-8 style="width: 100%;height: 200px;">dv-border-box-1</dv-border-box-8>
          <dv-border-box-8 style="width: 100%;height: 200px;">dv-border-box-1</dv-border-box-8>
        </div>
        <div style="flex: 0 1 50%;">
          <dv-border-box-8 style="width: 100%;height: 400px;">dv-border-box-1</dv-border-box-8>
        </div>
        <div style="flex: 0 1 25%;">
          <dv-border-box-8 style="width: 100%;height: 200px;">dv-border-box-1</dv-border-box-8>
          <dv-border-box-8 style="width: 100%;height: 200px;">dv-border-box-1</dv-border-box-8>
        </div>
      </div>

1.4.6 柱图

<div style="flex: 0 1 50%;">
		          <dv-border-box-8 style="width: 100%;height: 200px;">
		            <dv-capsule-chart :config="config" style="width:100%;height:200px" />
		          </dv-border-box-8>
 </div>
 # 数据
 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 锥形柱图

<div style="flex: 0 1 50%;">
          <dv-border-box-8 style="width: 100%;height: 200px;">
            <dv-conical-column-chart :config="config1" style="width:100%;height:200px;" />
          </dv-border-box-8>
 </div>
 #数据,注意图片的导入方式
 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)
<div class = "module-box">
        <div style="flex: 0 1 30%;">
          <dv-decoration-10 style="height:5px;" />
        </div>
        <div style="flex: 0 1 40%;">
          <div class = "d-flex">
              <dv-decoration-8 style="height:50px;flex: 1;" />
              <div style="flex: 1;">
                <dv-decoration-11 style="height:60px;">智慧大屏</dv-decoration-11>
              </div>
              <dv-decoration-8 :reverse="true" style="height:50px;flex: 1;" />
          </div>
        </div>
        <div style="flex: 0 1 30%;">
          <dv-decoration-10 style="height:5px;transform: rotateY(180deg);" />
        </div>
      </div>

1.4.9 拆分

<template>
  <div class="content bg">
    <dv-full-screen-container>
        <ModuleTitle />
        <ModuleHeader />
        <ModuleMain />
        <ModuleFooter />
    </dv-full-screen-container>
  </div>
</template>

<script>
import ModuleTitle from "./ModuleTitle.vue"
import ModuleHeader from "./ModuleHeader.vue"
import ModuleMain from "./ModuleMain.vue"
import ModuleFooter from "./ModuleFooter.vue"

export default{
  name: 'HomeView',
  components:{
    ModuleTitle,
    ModuleHeader,
    ModuleMain,
    ModuleFooter
  }
}
</script>

1.4.10 组件变为公共

<template>
        <dv-capsule-chart :config="config" style="width:100%;height:200px" />
</template>
  
  <script>
  export default{
    data() {
        return {
            config: {
                data: [
                    {
                        name: '南阳',
                        value: 167
                    },
                    {
                        name: '周口',
                        value: 67
                    },
                    {
                        name: '漯河',
                        value: 123
                    },
                    {
                        name: '郑州',
                        value: 55
                    },
                    {
                        name: '西峡',
                        value: 98
                    }
                ]
            },

        };
    },
}
</script>

1.4.11 数据

<template>
    <!-- 一行二等分 -->
    <div class="module-box">
    <div style="flex: 0 1 50%;">
        <dv-border-box-8 style="width: 100%;height: 200px;">
        <CapsuleChart :data-chart="items"/>
        </dv-border-box-8>
    </div>
    <div style="flex: 0 1 50%;">
        <dv-border-box-8 style="width: 100%;height: 200px;">
        <dv-conical-column-chart :config="config1" style="width:100%;height:200px;" />
        </dv-border-box-8>
    </div>
    </div>
  </template>
  
  <script>
  import CapsuleChart from './CapsuleChart.vue';
  export default{
    components: {
        CapsuleChart
    },
    data() {
        return {
            items:[
              {
                  name: '一月',
                  value: 167
              },
              {
                  name: '二月',
                  value: 67
              },
              {
                  name: '三月',
                  value: 123
              },
              {
                  name: '四月',
                  value: 55
              },
              {
                  name: '五月',
                  value: 98
              }
            ],
            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')
                ]
            },
        };
    },
}
  </script>

<template>
        <dv-capsule-chart :config="config" style="width:100%;height:200px" />
</template>
  
  <script>
  export default{
    props:{
        colorsChart:{
            type:Array,
            default:()=>['#e062ae', '#fb7293', '#e690d1', '#32c5e9', '#96bfff']
        },
        dataChart:{
            type:Array,
            default:()=>[
                {
                    name: '南阳',
                    value: 167
                },
                {
                    name: '周口',
                    value: 67
                },
                {
                    name: '漯河',
                    value: 123
                },
                {
                    name: '郑州',
                    value: 55
                },
                {
                    name: '西峡',
                    value: 98
                }
            ]
        }
    },
    data() {
        return {
            config: {
                data: this.dataChart,
                colors:this.colorsChart,
                unit:"单位",
                showValue:true
            },

        };
    },
}
</script>

1.5 ECharts

1.5.1 安装

yarn add  echarts -S

1.5.2 准备容器

  1. 准备容器

    # vue中需要修改 <template>
    </template>

  2. 初始化

    <script> import * as echarts from "echarts"

    export default{
    data(){
    return{

         }
 },
 // 生命周期，钩子函数
 mounted(){
     this.initChart();
 },
 methods:{
     initChart(){
         // 基于准备好的dom，初始化echarts实例
         var myChart = echarts.init(this.$refs.chart);

         // 指定图表的配置项和数据
         var option = {
             title: {
                 text: 'ECharts 入门示例'
             },
             tooltip: {},
             legend: {
                 data: ['销量']
             },
             xAxis: {
                 data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
             },
             yAxis: {},
             series: [
                 {
                 name: '销量',
                 type: 'bar',
                 data: [5, 20, 36, 10, 10, 20]
                 }
             ]
         };

         // 使用刚指定的配置项和数据显示图表。
         myChart.setOption(option);
     }
 }

    }

    </script>

1.6 实时渲染（WebSocket）

  1. 服务端向客户端推送消息，http要由客户端（浏览器）主动发起；即时通信，实时数据，订阅推送
相关推荐
小小竹子几秒前
前端vue-实现富文本组件
前端·vue.js·富文本
青稞儿27 分钟前
面试题高频之token无感刷新（vue3+node.js）
vue.js·node.js
程序员凡尘1 小时前
完美解决 Array 方法 (map/filter/reduce) 不按预期工作 的正确解决方法，亲测有效！！！
前端·javascript·vue.js
潮汐退涨月冷风霜1 小时前
机器学习之非监督学习（四）K-means 聚类算法
学习·算法·机器学习
GoppViper2 小时前
golang学习笔记29——golang 中如何将 GitHub 最新提交的版本设置为 v1.0.0
笔记·git·后端·学习·golang·github·源代码管理
羊小猪~~2 小时前
深度学习基础案例5--VGG16人脸识别(体验学习的痛苦与乐趣)
人工智能·python·深度学习·学习·算法·机器学习·cnn
Charles Ray2 小时前
C++学习笔记 —— 内存分配 new
c++·笔记·学习
我要吐泡泡了哦3 小时前
GAMES104：15 游戏引擎的玩法系统基础-学习笔记
笔记·学习·游戏引擎
骑鱼过海的猫1233 小时前
【tomcat】tomcat学习笔记
笔记·学习·tomcat
贾saisai6 小时前
Xilinx系FPGA学习笔记（九）DDR3学习
笔记·学习·fpga开发
热门推荐
01RAG 实践- Ollama+RagFlow 部署本地知识库02组基轨迹建模 GBTM的介绍与实现（Stata 或 R）032024年高教社杯数学建模国赛C题超详细解题思路分析04Coze扣子平台完整体验和实践（附国内和国际版对比）05苍穹外卖面试总结06【2024数模国赛赛题思路公开】国赛B题思路丨附可运行代码丨无偿自提07yolov8实战第五天——yolov8+ffmpg实时视频流检测并进行实时推流——（推流，保姆教学）08CCF-CSP认证考试 202406-3 文本分词 100分题解09【2024高教社杯全国大学生数学建模竞赛】B题 生产过程中的决策问题——解题思路 代码 论文10浏览器插件——ModHeader 的分享和学习