1、在src—components里增加一个vue文件，本例文件名为Parent，内容为：

<template>
  <div>
    <h1>{{msg}}</h1>
  </div>
</template>
<script>
  export default {
    name: 'Parent',
    data: function () {
      return {
        msg: '你好，小戴'
      }
    }
  }
</script>
<style lang="scss" scoped> </style>

（1）视图层


<template>

</template>

（2）业务逻辑

<script>

export default {

  name: 'HelloWorld',

}

</script>

（3）样式

<style lang="scss" scoped>

</style>

scoped 表示当前样式 只作用在当前组件上。该区域的样式，不会和其他组件发生冲突！

2、为Parent.vue文件添加路由

在文件router—index.js里

202105251621941460103219

import+自定义组件名称+组件路径


{

path是自定义路径，

component：自定义组件名称

}

在本地终端输入：本地地址+/wmq

202105251621941728328335

代码演示：

202105251621941744146433

3、如何在首页添加组件

（1）在views中的Home添加内容：

202105251621941917728563

（2）代码演示：

202105251621941934455475