background color about vue component

common/Headapes.vue

@@ -0,0 +1,29 @@
+<template>
+<div class="headerapes">
+  <h4 style="color:orange;">header component</h4>
+</div>
+</template>
+<script type="module">
+export default {
+  methods:{
+    add_number(){
+
+    }
+  },
+  setup(){
+    console.log("about vue component setup");
+  },
+  mounted(el){
+    console.log("about vue under mounted ---");
+  }
+}
+</script>
+<style scoped>
+.headerapes{
+  color:orange;
+  font-weight: bolder;
+}
+</style>
+
+
+

index.js

@@ -29,7 +29,8 @@ import About from "./component/About.vue";
 import Login from "./component/approve/Login.vue";
 import Register from "./component/approve/Register.vue";
 import File from "./component/file/File.vue";
-import Headapes from "./component/Headapes.vue";
+// import Headapes from "./component/Headapes.vue";
+import Headapes from "./common/Headapes.vue";
 import i18n from "./i18n.js";
 import { useI18n } from 'vue-i18n';