如何在 vue cli 项目中集成 trading-vue-js？答案

【问题标题】：How to integrate trading-vue-js in a vue cli project?如何在 vue cli 项目中集成 trading-vue-js？
【发布时间】：2021-05-03 21:27:28
【问题描述】：

我想使用/集成trading-vue-js。我可以很好地运行 trading-vue-js 测试示例。

所以，我做了以下事情。

nmp 安装 trading-vue-js

我已经设置了一个 vue，“views/Chart.vue”，它可以正常加载。

但是在尝试按照 trading-vue-js 中的示例代码并将其添加到“views/chart.vue”时，没有出现图表。

<template>
  <div class="chartPage">
    <h1>This is a Trading Chart page</h1>
  </div>
<trading-vue :data="chart"
  :width="this.width"
  :height="this.height"
  :toolbar="true"
  :color-back="colors.colorBack"
  :color-grid="colors.colorGrid"
  :color-text="colors.colorText">
</trading-vue>
</template>

<script>
import { TradingVue, DataCube } from 'trading-vue-js'
import Data from 'data/data_btc.json'

export default {
  name: 'Simple',
  description: 'Should display everything okay',
  props: ['night'],
  components: {
    TradingVue
  },
  methods: {
    onResize (event) {
      this.width = window.innerWidth
      this.height = window.innerHeight - 50
    }
  },
  mounted () {
    window.addEventListener('resize', this.onResize)
    this.onResize()
    window.dc = this.chart
  },
  computed: {
    colors () {
      return this.$props.night ? {} : {
        colorBack: '#fff',
        colorGrid: '#eee',
        colorText: '#333'
      }
    }
  },
  beforeUnmount () {
    window.removeEventListener('resize', this.onResize)
  },
  data () {
    return {
      chart: new DataCube(Data),
      width: window.innerWidth,
      height: window.innerHeight
    }
  }
}
</script>

<style>

</style>

我没有返回任何错误。如果您想知道，我在 vue.config.js 中设置了一个路径别名，以便我可以导入图表的价格数据。数据是从示例文件中复制而来的。

import Data from 'data/data_btc.json'

这似乎可行，因为我没有看到任何错误。

documentation 说

数据结构专业提示：如果您想查看白屏以外的内容，则必须使用图表

我想我已经理解这意味着data(){} 至少需要以下内容：

    data () {
    return {
      chart: new DataCube(Data),
    }

我已经提供了，但什么也没出现。

【问题讨论】：

标签： javascript node.js vue.js

【解决方案1】：

我终于让它工作了。我把各种组件的命名弄得一团糟，还引入了一些不必要的代码。我想这就是当你不真正理解发生了什么的情况下尝试将一些代码组合在一起时得到的结果。

我做了更多的 RTFM。然后我创建了一个代码块如何组合在一起的可视化图表，它帮助我比较了工作测试示例和我自己的代码。这就是我最终确定我做错了什么的方式。

所以我把它剥离回最简单的配置。答对了！它奏效了。

为 Firefox 安装 Vue Developer 扩展也很有帮助。

【讨论】：