工程准备

2021-08-07 by uino 97 资源工厂

准备

优锘科技(© 2017 by uino) Proxima 产品统计图表(以下简称图表)开发需要准备以下两个工程

  • 图表打包输出工程

  • 图表开发工程

为什么需要两个工程呢?最主要的原因是打包输出工程在开发过程中不能实时看到效果,也仅是对图表资源的一个规范封装输出能力。当然在打包工具中也完全可以写图表组件,只是这样开发不友好,效率低,具体开发方式请查阅后续frame.js。


I. 图表打包输出工程

功能

  • 规范代码格式
  • 整合代码资源
  • 输出图表资源(zip 包形式)

特点

  • gulp 流任务
  • Vue 框架依赖
  • element-ui 默认支持
  • 丰富的图表组件库

获取

在gitLab上联系管理员开通权限,克隆工程到本地

git地址https://git.uino.com/doiot/proxima/proxima-chart3.0

安装依赖

npm install

运行打包命令

npm run zip

当运行这个命令后工程目录下创建了 dist 文件夹,这个工程就运行成功了,查看 dist 文件下的 components 文件夹,就可以看到打包生成的资源 zip 包 如下图所示

II. 图表开发工程

功能

  • Vue 工程图表开发
  • 输出图表

创建方式

1 使用已创建好的 Vue 工程

git clone git@git.uino.com:rich/rich-ui/rich-ui.git

安装依赖

npm install

运行工程

npm run serve

2 自创建工程


特别提醒:不管是使用哪个工程开发,每天做的第一件事是拉取最新的代码 最后一件事是提交当天的代码

如果你已将上述环境准备齐全,那么接下来可以直接到输出一个图表的示例。