未捕获的引用错误 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

我正在使用网络包。仅供参考，我正在遵循 Laracasts 教程。如何解决此错误并呈现页面？

Answer 1

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

但是，无论如何你都没有正确导出 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时，它实际上将被定义。