写vue比较常犯的错误

一般初学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 { ... }

像上面这样写就能尽可能多避免上面的问题。