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 绑定的数据^_^）