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

你得到了＆＃34; Vue没有定义＆＃34;错误，因为您没有在Vue文件中导入HeightCard.js。

但是，您仍然无法正确导出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时，它实际上将被定义。

未捕获的参考错误VueJS

1 个答案: