HQChart使用教程87-HQChart在VUE插件模式下源码调试配置

HQChart开发说明

1. 开发语言: 纯js， 只需要记事本+浏览器（f12)就可以开发调试。
2. 设计模型：使用面对对象的设计开发的。 所有的东西都设计成类的模式。
3. 依赖：只使用了jquery
   1）使用jquery做为网络通讯，内部以封装了一层网络类，如果需要可以直接通过重载网络类重写。
   2）内置一些设置dom窗口使用了jquery来控制。这些窗口操作都有外部监听事件， 可以在外部截获自己行替换
4. TypeScript, 目前没有计划使用， 原因嘛我都已经用面对对象来开发了，还能用它干什么呢？ 非常喜欢直接用js写，可以放飞自己， 没有怎么束缚。

HQChart插件

使用npm install hqchart --save-dev来安装hqchart的。https://www.npmjs.com/package/hqchart

HQChart插件目录说明

在node_modules目录下可以找到hqchart目录。

lib

已经编译成ES5的hqchart代码， 插件默认是使用这个目录里面的代码

src

hqchart源码，使用ES6写的js代码都在这个里面。
VUE插件版本的源码在src\jscommon\umychart.vue\umychart.vue.js
lib里面的ES5的版本是使用插件babel把ES6版本转成ES5版本。

VUE源码调试配置

在项目webpack修改下， 让编译的时候保留源码。具体可以自己查devtool的参数说明，我这里就不说了。

configureWebpack: {
  devtool: 'source-map',

使用上面的配置以后， 在项目里面自己的写的代码就可以(F12)断点调试了, 但是HQChart模式使用ES5转换以后的版本，所有还不能调试。需要修改导出类的文件，改成ES6的源码文件,具体修改lib\main.js文件的Chart导出文件，改成src/jscommon/umychart.vue/umychart.vue.js这个文件。

//行情图形库
//module.exports.Chart = require('./umychart.vue.js').default;

//行情图形库 使用源码
module.exports.Chart = require("../src/jscommon/umychart.vue/umychart.vue.js").default;

//行情股票数据接口类
module.exports.Stock = require('./umychart.stock.vue.js').default;

//行情股票数据接口类
module.exports.RegressionTest = require('./umychart.regressiontest.vue.js').default;

这样就完成了。F12找到HQChart插件，在源码里面就可以断点调试了。

2021年最后一篇教程，感谢大家这1年对hqchart的支持，祝大家新年快乐。

交流QQ群: 950092318

如果还有问题可以加交流QQ群: 950092318

HQChart代码地址

地址：github.com/jones2000/HQChart