"Unknown custom element: <ShowList>"浏览器中使用 Vue .js

Question

我使用vue-cli create来设置一个基本的样板项目。我做了一些最初有效的小修改。然后在某个时候，我的两个组件都停止了在浏览器中的工作。没有来自vue-cli service serve的警告。

在浏览器控制台中，我得到了两个元素的错误Unknown custom element。

这是我的main.js；

import './sass/style.scss'
import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
/*
new Vue({
render: h => h(App)
}).$mount('#app')
*/
new Vue({
el: '#app',
template: '<App/>',
render: h => h(App),
components: { App }
}).$mount('#app');

这是我的App.vue；

<template>
<div id="app">
<ShowList list_id="default"/>
</div>
</template>
<script>
import ShowList from './components/ShowList.vue'
export default {
name: 'app',
components: {
ShowList
}
}
</script>
<script lang="scss">
@import "sass/common.scss";
// Static footer
.footer {
position: absolute;
bottom: 0;
width: 100%;
height: $footer_height; /* Set the fixed height of the footer here */
margin-bottom:0;
}
.navbar {
margin-bottom:0;
}
</script>

这是其中一个组成部分；

<template>
<div class="row">
<div class="col-md-4 order-md-2 mb-4">
<h4 class="d-flex justify-content-between align-items-center mb-3">
<span class="text-muted">Din lista</span>
</h4>
<ul class="list-group mb-3">
<li v-for="beer in beers" v-bind:key="beer.name" class="list-group-item d-flex justify-content-between lh-condensed">                                                                                 
<div>
<h6 class="my-0">{{ beer.name }}</h6>
<small class="text-muted">{{ beer.description }}</small>
</div>
<span class="text-muted">{{ beer.price }}</span>
</li>
</ul>
</div>
</div>
</template>
<script>
var beer_items = [
{
name: 'Hoegarden',
price: '19:90 kr',
description: 'Tyskt öl'
},
{
name: 'Leffe',
price: '16:90 kr',
description: 'Belgiskt öl'
},
{
name: 'Fat Tire',
price: '17:50 kr',
description: 'Amerikanskt öl'
}
];
export default {
name: 'ShowList',
props: {
list_id: String
},
data () {
return {
beers: beer_items
};
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.flip-list-move {
transition: transform 0.5s;
}
.no-move {
transition: transform 0s;
}
.ghost {
opacity: .5;
background: #C8EBFB;
}
.list-group {
min-height: 20px;
}
.list-group-item {
cursor: move;
}
.list-group-item i{
cursor: pointer;
}
</style>

我也尝试过使用连字符的组件名称，如显示列表，但没有帮助。

我觉得我错过了一些简单而重要的东西，但到目前为止，Vue Gitter上还没有人能弄清楚是什么。

Answer 1

这可能是因为你的App.vue中有<script lang="scss">而不是<style lang="scss">标签吗？