如何在 vue cli 項目中集成 trading-vue-js？

Question

我想使用/集成trading-vue-js 。 我可以很好地運行 trading-vue-js 測試示例。

所以，我做了以下。

nmp 安裝交易-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'

這似乎有效，因為我沒有看到任何錯誤。

文件說

數據結構專業提示：如果您想查看白屏以外的內容，則必須使用圖表

我想我已經理解這意味着data(){}至少需要以下內容：

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

我已經提供了，但什么也沒出現。

Answer 1

我終於讓它工作了。 我把各種組件的命名弄得一團糟，還引入了各種不必要的代碼。 我想這就是當您在不真正了解發生了什么的情況下嘗試將代碼位一起破解時所得到的。

我做了更多的RTFM。 然后我創建了一個代碼塊如何組合在一起的可視化圖表，它幫助我比較了工作測試示例和我自己的代碼。 這就是我最終確定我做錯了什么的方式。

所以我把它剝離回最簡單的配置。 答對了。 有效。

為 Firefox 安裝 Vue Developer 擴展也有很大幫助。