使用Web Pack导入Vue组件

Question

我真的是Vue.js的新手，并且想知道如何导入vue组件。 我有两个组成部分。 第一个是Index.js，第二个是Ch.js。 Index.js完美显示。 我导入和Ch.js，什么也没有出现。 Index和Ch都包含与我构建的Chart.js图相同的代码。

如何获得Ch.js像Index.js一样呈现？

索引值

<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
          }
        }]
      }
    })
  }
})

我看过这个线程，但是没有用/帮助

Answer 1

• 您的index.vue的脚本标签应包含您的components/index.js文件的内容。
• 您的索引组件应导入Ch组件并在其Vue定义中使用它
• 您的索引模板应该有一个包含所有其他内容的DOM元素

---

<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 }
}

必须调用才能获取组件。