描述：重新編寫一個組件

1.1 編寫一個PrintName.vue

 1 <!--這裏是模板 -->
 2 <template>
 3   <div class="hello">
 4     <h1>{{ msg }}</h1>
 5   </div>
 6 </template>
 7 
 8 
 9 <script>
10 export default {
11   // 本組件名稱
12   name: "PrintName",
13 
14   // function data => data()
 

15   data() {
16     return {
17       msg: "My name is Mr_L"
18     };
19   }
20 };
21 </script>
22 
23 <!-- 這裏添加樣式，可以改為scss處理，只需要把類型一改，再配置一下即可 -->
24 <style scoped>
25 h1,
26 h2 {
27   font-weight: normal;
28 }
29 ul {
30   list-style-type: none;
31   padding: 0;
32
 
 }
33 li {
34   display: inline-block;
35   margin: 0 10px;
36 }
37 a {
38   color: #42b983;
39 }
40 .hello {
41   color: #f00;
42 }
43 </style>

1.2 編寫路由

1.3訪問

不知道你有沒有發現一件事情，圖標也有啊！，本身App.vue就有啊（我們帶過去的不過就是router-view 綁定的數據^_^）

vue - src for components || router(index.js)