background color about vue component

component/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.html

@@ -10,7 +10,7 @@
     <!-- <h3>this is node -> Vue test</h3> -->
     <div id='app'  style='color:red; font-size:20px; font-weight:bold;'>app node start...</div>
     <template id="my-app">
-		<!-- <Headapes>1212</Headapes> -->
+		<Headapes></Headapes>
 		<!-- <div v-html='info'></div> 
 		<Home @op="add">home vue</Home>
 		<h5 style="color:oranged">{{number}}</h5>

index.js

@@ -29,7 +29,7 @@ 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 Headerapes from "./common/Headapes.vue";
+import Headapes from "./component/Headapes.vue";
 import i18n from "./i18n.js";
 import { useI18n } from 'vue-i18n';