使用 webpack 导入 vue 组件

Question

我真的是 Vue.js 的新手，想知道如何导入 vue 组件。我有两个组件。第一个是 Index.js，第二个是 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 文件的内容。
• 您的索引组件应该导入 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 }
}

必须调用才能获取组件。