将一个组件相关的html结构，css样式，以及交互的JavaScript代码从html文件中剥离出来，合成一个文件，这种文件就是单文件组件，相当于一个组件具有了结构、表现和行为的完整功能，方便组件之间随意组合以及组件的重用，这种文件的扩展名为“.vue”，比如：”breadcrumb.vue”。

    1. // 使用template标签来定义html部分
    2. <template>
    3.     <div :class="{crumb:true,hot:isHot}" @click="isHot=!isHot">
    4.         当前位置是：{{ pos }}
    5.     </div>
    6. </template>
    8. // javascript要写成模块导出的形式：
    9. <script>
    10.     export default{
    11.         props:['pos'],
    12.         data:function(){
    13.             return {
    14.                 isHot:false                
    15.             }
    16.         }
    17.     }
    18. </script>
    20. // 样式中如果有scope关键字，表示这些样式是组件局部的，不会影响其他元素
    21. <style scoped>
    22. .crumb{
    23.     width:90%;
    24.     line-height:50px;
    25.     margin:0px auto;
    26.     border-bottom:1px solid #ddd;
    27. }
    28. .hot{
    29.     color:red;
    30.     font-weight:bold;
    31.     text-indent:10px;
    32. }
    33. </style>