未捕获的引用错误 VueJS

Question

我正在开发一个包含许多组件的 VueJS 应用程序。文件如下所示

<template>
  <div id="hd">
    <height-card></height-card>
  </div>
</template>
<script>
import HeightCard from './../components/PatientProfileComponents/HeightCard'

export default {
  name: 'profile',
  data() {
    return {
      pagename: 'About'
    }
  },

  components: {
    'height-card': HeightCard
  }
}

</script>

身高卡组件写在一个名为HeightCard.js的JavaScript文件中，如下图

Vue.component('height-card', {
    template: `
        <div class="column">
          <div class="ui fluid card">
            <div class="content">
              <i class="right floated large grey setting icon"></i>
              <i class="right floated large grey users icon"></i>
              <i class="left floated large grey move icon"></i>
              <font size="4"><b>Height</b></font>
            </div>
            <div class="content">
              <br></br>
              <div class="ui vertically divided grid">
                <div class="two column row">
                  <div class="column">
                    <img class="ui image" src="/images/human1.jpg">
                  </div>
                  <div class="column">
                    <div class="row">
                      <img class="ui image" src="/images/line2.jpg">
                    </div>
                    <div class="row">
                      <span style="color:grey;" align="center">Height:</span>
                      <h3>165 cm</h3>
                    </div>
                    <div class="row">
                      <img class="ui image" src="/images/line2.jpg">
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="content" style="background-color:#F0F8FF;">
              <div class="right floated content">
                <div class="ui small button">Show full results</div>
              </div>
            </div>
          </div>
        </div>
    `
});

new Vue({
    el: '#hd'
})

我尝试运行该文件。页面不呈现。我打开浏览器并在控制台中看到错误。错误看起来像这样

Uncaught ReferenceError: Vue is not defined
    at eval (eval at <anonymous> (build.js:4707), <anonymous>:1:1)
    at Object.<anonymous> (build.js:4707)
    at __webpack_require__ (build.js:660)
    at fn (build.js:86)
    at eval (eval at <anonymous> (build.js:2662), <anonymous>:16:106)
    at Object.<anonymous> (build.js:2662)
    at __webpack_require__ (build.js:660)
    at fn (build.js:86)
    at eval (eval at <anonymous> (build.js:4529), <anonymous>:7:3)
    at Object.<anonymous> (build.js:4529)
    (anonymous)	@	HeightCard.js?41e9:1
    (anonymous)	@	build.js:4707
    __webpack_require__	@	build.js:660
    fn	@	build.js:86
    (anonymous)	@	VM2555:16
    (anonymous)	@	build.js:2662
    __webpack_require__	@	build.js:660
    fn	@	build.js:86
    (anonymous)	@	Profile.vue?d6de:7
    (anonymous)	@	build.js:4529
    __webpack_require__	@	build.js:660
    fn	@	build.js:86
    (anonymous)	@	VM2188:15
    (anonymous)	@	build.js:2676
    __webpack_require__	@	build.js:660
    fn	@	build.js:86
    (anonymous)	@	VM2186:3
    (anonymous)	@	build.js:2384
    __webpack_require__	@	build.js:660
    fn	@	build.js:86
    (anonymous)	@	build.js:4700
    __webpack_require__	@	build.js:660
    (anonymous)	@	build.js:709
    (anonymous)	@	build.js:712

我正在使用 Webpack。仅供参考，我正在关注 Laracasts 教程。如何解决此错误并让页面呈现？

Answer 1

您收到“未定义 Vue”错误，因为您没有在 HeightCard.js 文件中导入 Vue。

但是，无论如何，您都没有正确导出 Vue 组件，因此即使您将 Vue 导入该文件，您的 HeightCard 组件在您导入它的文件中也将是 undefined。

最简单的解决方案是将您的 HeightCard 组件更改为 single file component，就像父组件一样。

将您的文件命名为 HeightCard.vue，然后将其结构如下：

<template>
  <div class="column">
    <div class="ui fluid card">
      <div class="content">
        <i class="right floated large grey setting icon"></i>
        <i class="right floated large grey users icon"></i>
        <i class="left floated large grey move icon"></i>
        <font size="4"><b>Height</b></font>
      </div>
      <div class="content">
        <br></br>
        <div class="ui vertically divided grid">
          <div class="two column row">
            <div class="column">
              <img class="ui image" src="/images/human1.jpg">
            </div>
            <div class="column">
              <div class="row">
                <img class="ui image" src="/images/line2.jpg">
              </div>
              <div class="row">
                <span style="color:grey;" align="center">Height:</span>
                <h3>165 cm</h3>
              </div>
              <div class="row">
                <img class="ui image" src="/images/line2.jpg">
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="content" style="background-color:#F0F8FF;">
        <div class="right floated content">
          <div class="ui small button">Show full results</div>
        </div>
      </div>
    </div>
  </div>
</template>

现在当父组件导入HeightCard时，它实际上会被定义。