一、项目环境搭建
1、该命令行工具可快速搭建大型单页应用。
cnpm install -g @vue/cli
2、查看脚手架版本
vue -V
3、创建项目
vue create 项目名称
二、生产环境和开发环境的区别
devDependencies中的插件只用于开发环境,不用于生产环境。
而dependencies是要发布到生产环境的。
比如,babel有关的转化es6到es5的依赖只是开发环境下转化用,生产过程中是用不到。
而vue,或element-ui这种实际运行中会调用,得写在dependencies中。
例如安装axios
安装到开发环境
npm axios --save-dev
安装到生产环境
npm axios --save
- dependencies: 表示生产环境下的依赖管理,npm install name -save
简写(npm i name -S) 自动把模块和版本号添加到dependencies。
- devDependencies: 表示开发环境下的依赖管理,npm install name -save-dev
简写(npm i name -D) 自动把模块和版本号添加到devDependencies。
三、DataV 大屏数据展示组件库
DataV,主要用于构建大屏(全屏)数据展示页面即数据可视化,提供多种类型组件可供使用。
3.1、npm安装
npm i @jiaminghi/data-view -S
3.12、 在main.js全局导入
import dataV from '@jiaminghi/data-view' // 将自动注册所有组件为全局组件
Vue.use(dataV)
3.13 我用的是vue版本,可能会遇到这个问题:
无法找到模块“@jiaminghi/data-view”的声明文件。“c:/User/Senleo/Desktop/erp/ffep-manage-vue/node_modules/@jiaminghi/data-view/lib/index/index.js”隐式拥有 “any” 类型。
尝试使用 npm i --save-dev @types/jiaminghi__data-view (如果存在),或者添加一个包含 declare module '@jiaminghi/data-view'; 的新声明(.d.ts)文件
解决办法
在src目录下新建一个datav.d.ts文件,然后写上这句内容
declare module "@jiaminghi/data-view" ,保存,关闭项目,重新打开项目运行即可。
3.2、全屏容器
数据可视化页面一般在浏览器中进行全屏展示,全屏容器将根据屏幕比例及当前浏览器窗口大小,自动进行缩放处理。浏览器全屏后,全屏容器将充满屏幕。
注意:
- 建议在全屏容器内使用百分比搭配flex进行布局,以便于在不同的分辨率下得到较为一致的展示效果。
- 使用前请注意将
body
的margin
设为0,否则会引起计算误差,全屏后不能完全充满屏幕。
<dv-full-screen-container>
content
</dv-full-screen-container>
3.3 边框
边框均由SVG元素绘制,体积轻量不失真,它们的使用极为方便。
<template>
<div class="content bg">
<!-- 全屏容器 -->
<dv-full-screen-container>
<!-- 横排 等比例排放 一行展示2个 -->
<div class="module_box">
<div style="flex:0 1 50%">
<dv-border-box-5 style="width:100%;height:200px;">dv-border-box-5</dv-border-box-5>
</div>
<div style="flex:0 1 50%">
<dv-border-box-5 style="width:100%;height:200px;">dv-border-box-5</dv-border-box-5>
</div>
</div>
<!-- 横排 等比例排放 一行展示4个 -->
<div class="module_box">
<div style="flex:0 1 25%">
<dv-border-box-1 style="width:100%;height:200px;">dv-border-box-1</dv-border-box-1>
</div>
<div style="flex:0 1 25%">
<dv-border-box-2 style="width:100%;height:200px;">dv-border-box-2</dv-border-box-2>
</div>
<div style="flex:0 1 25%">
<dv-border-box-3 style="width:100%;height:200px;">dv-border-box-3</dv-border-box-3>
</div>
<div style="flex:0 1 25%">
<dv-border-box-4 style="width:100%;height:200px;">dv-border-box-4</dv-border-box-4>
</div>
</div>
<!-- 横排 等比例排放 一行展示4个 -->
<div class="module_box">
<div style="flex:0 1 25%">
<dv-border-box-6 style="width:100%;height:200px;">dv-border-box-6</dv-border-box-6>
</div>
<div style="flex:0 1 50%">
<dv-border-box-7 style="width:100%;height:200px;">dv-border-box-7</dv-border-box-7>
</div>
<div style="flex:0 1 25%">
<dv-border-box-8 style="width:100%;height:200px;">dv-border-box-8</dv-border-box-8>
</div>
</div>
</dv-full-screen-container>
</div>
</template>
注意:
flex: 0 1 50%;
参数解释:
第一个参数:flex-grow定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大。
第二个参数:flex-shrink定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。
第三个参数:flex-basis定义了在分配多余空间之前,项目占据的主轴空间(main size)。浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为auto,即项目的本来大小。
flex: 1 ; => flex : 1 1 0%; 表示在分配前不占据主轴空间,根据剩余或缺少的部分等比放大和缩小的项目。
<!-- 顶部 -->
<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">
<!-- 三等分,三个同时设置flex:1,平均分配,相当于每等分均分 -->
<dv-decoration-8 style="width:300px;height:50px; flex:1;" />
<div style="flex:1;" class="tc box_middle">
<dv-decoration-11 style="height:60px;">智慧工厂数据中心</dv-decoration-11>
</div>
<dv-decoration-8 :reverse="true" style="width:300px;height:50px;flex:1;" />
</div>
</div>
<div style="flex:0 1 30%">
<dv-decoration-10 style="height:5px; transform:rotate(180deg);" />
</div>
</div>
四、DataV结合Echarts图表
4.1、安装依赖包
npm i echarts -S
4.2、导入使用
在 main.js 做全局组件导入
import echarts from 'echarts' // 全局组件导入
组件中引入
<template>
<!-- 为Echarts 准备一个定义了宽高的 DOM -->
<!-- <div id="main" style="width: 100%; height: 400px"></div> -->
<div ref="chart" style="width: 100%; height: 400px"></div>
</template>
<script>
import * as echarts from 'echarts/core';
export default {
data() {
return {};
},
mounted() {
this.initCharts(); //绘制图表
},
methods: {
initCharts() {
// 基于准备好的dom,初始化echarts实例
// var myChart = echarts.init(document.getElementById("main"));
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>
<style></style>