Uncaught reference error 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>

Компонент карты высоты записывается в файле JavaScript с именем HeightCard.js, как показано ниже

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 is notfined", потому что вы не импортируете Vue в вашем HeightCard.js файл.

Но вы все равно неправильно экспортируете компонент Vue, так что даже если вы импортируете Vue в этот файл, ваш HeightCard компонент будет undefined в файле, куда вы его импортируете.

Самым простым решением было бы изменить ваш компонент HeightCard на отдельный файловый компонент, как родительский компонент.

Назовите свой файл 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, это на самом деле будет определено.