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

描述：重新编写一个组件

1.1 编写一个PrintName.vue

 <!--这里是模板 -->
 <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>

1.2  编写路由

1.3访问

不知道你有没有发现一件事情，图标也有啊！，本身App.vue就有啊（我们带过去的不过就是router-view 绑定的数据^_^）