<!--这里是模板 -->

 <template>

   <div class="hello">

     <h1>{{ msg }}</h1>

   </div>

 </template>

 <script>

 export default {

   // 本组件名称

   name: "PrintName",

   // function data => data()

   data() {

     return {

       msg: "My name is Mr_L"

     };

   }

 };

 </script>

 <!-- 这里添加样式，可以改为scss处理，只需要把类型一改，再配置一下即可 -->

 <style scoped>

 h1,

 h2 {

   font-weight: normal;

 }

 ul {

   list-style-type: none;

   padding: 0;

 }

 li {

   display: inline-block;

   margin: 0 10px;

 }

 a {

   color: #42b983;

 }

 .hello {

   color: #f00;

 }

 </style>