ウェブパックを使用してvueコンポーネントをインポートする

Question

私はVue.jsが本当に新しく、vueコンポーネントをインポートする方法が不思議です。私は2つのコンポーネントを持っています。最初のものはIndex.jsで、2番目のものはCh.jsです。 Index.jsは完全に表示されます。私はインポートし、Ch.jsと何も表示されません。 IndexとChの両方に、私が作成したChart.jsグラフと同じコードが含まれています。

Ch.jsをIndex.jsのようにレンダリングするにはどうすればよいですか？

index.vue

<template> 
    <!-- <index></index> --> 
    <ch></ch> 
</template> 

<script> 
    import Index from '../components/index' 
    import Ch from '../components/ch' 
</script> 

Ch.js

import { Line, mixins } from 'vue-chartjs' 

export default Line.extend({ 
    mixins: [mixins.reactiveProp], 
    props: ["data", "options"], 
    mounted() { 
    this.renderChart({ 
     labels: ['2:00pm', '2:15pm', '2:30pm', '2:45pm', '2:50pm'], 
     datasets: [{ 
     borderColor: "#57C1E8", 
     pointBackgroundColor: '#57C1E8', 
     backgroundColor: 'rgba(220,220,220,0)', 
     showTooltip: false, 
     data: [5, 8, 3, 2, 3, 6, 3], 
     }, { 
     borderColor: "#82bc00", 
     pointBackgroundColor: '#82bc00', 
     backgroundColor: 'rgba(220,220,220,0)', 
     showTooltip: false, 
     data: [3, 4, 8, 6, 10, 2, 1] 
     }, { 
     borderColor: "#f7a800", 
     pointBackgroundColor: '#f7a800', 
     backgroundColor: 'rgba(220,220,220,0)', 
     data: [8, 6, 10, 15, 6, 2, 3] 
     }] 
    }, { 
     elements: { 
     line: { tension: 0 }, 
     point: { radius: 0 } 
     }, 
     responsive: true, 
     maintainAspectRatio: false, 
     legend: { display: false }, 
     scales: { 
     yAxes: [{ 
      display: true, 
      gridLines: { 
      display: true, 
      color: "rgba(0,0,0, 0.2)", 
      drawBorder: false, 
      }, 
      ticks: { display: false } 
     }], 
     xAxes: [ { 
      display: true, 
      gridLines: { 
      color: "rgba(0,0,0, 0.2)", 
      borderDash: [10, 5], 
      display: true, 
      drawBorder: false 
      } 
     }] 
     } 
    }) 
    } 
}) 

I've taken a look at this thread, but it didn't work/help

Answer 1

• あなたindex.vueのスクリプトタグは、あなたのcomponents/index.jsファイルの内容を含める必要があります。それはVueの定義の中で
• あなたのインデックスコンポーネントは、それをChコンポーネントをインポートして使用する必要があります
• あなたのインデックステンプレートを指定する必要があります

---

<template> 
    <div> 
    <ch></ch> 
    </div> 
</template> 

<script> 
    import Ch from '../components/ch'; 

    export default { 
    // your index component vue here 

    components: { Ch } 

    }; 
</script> 

Answer 2

export default { 
    components: { Index, Ch } 
} 

他のすべて包む単一のDOM要素を持っている必要がありますコンポーネントを取得するために呼び出されます。