vue的简单学习

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

<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 准备容器

准备容器

<div id="main" style="width: 600px;height:400px;"></div>
# vue中需要修改
<template><!-- 为ECharts准备一个定义了宽高的DOM --><div ref="chart" style="width: 100%;height:200px;"></div>
</template>

初始化

<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>