一般初学vue的同学可能会犯下面这类错误。
<script>
import Header from '../../components/header.vue';
const app = new Vue({
el: '#app',
components: {
'header': Header
},
data: {
name: 'Demo',
}
})
</script>
上面script中的语法错误，正确的语法是下面这样。
vue-component-with-preprocessors.png
vue-component.png
以上两种方式都是官方给出的例子。
https://vuefe.cn/v2/guide/single-file-components.html
我们再来说一个比较容易犯的错误：
有的同学可能会在.vue文件中使用一些HTML5的语义化标签，例如：header、article、nav之类的，同时，也有可能会在css中这样写样式：
<style lang="scss" rel="stylesheet/scss" scoped>
header {
margin-bottom: 30/75+rem;
width: 100%;
height: 90/75+rem;
font-size: 0;
border-bottom: 1px solid #f8f8f8;
}
h3{
margin-right: 20/75+rem;
line-height: 1.4;
color: #222;
width: 70%;
font-weight: normal;
font-size: 32/75+rem;
}
</style>
虽然我们在样式的开始就加了scoped这个私有化的标记，但是，当整个项目都打包在一个文件里面的时候，直接给这些标签写样式，就会导致整个项目中的header、h3都会应用到这些样式，而我们在用调试工具的时候，有时会搞不清楚到底是哪些页面中添加了这些样式，特别是页面多的时候。所以，我个人觉得最好的办法是直接给这些标签添加一个class，然后在class上面写样式。例如：
header.detail-header { ... }
h3.detail-h3 { ... }
像上面这样写就能尽可能多避免上面的问题。
