background color about vue component

common/Header.vue → common/HeaderApes.vue

@@ -1,5 +1,5 @@
 <template>
-<div class="header">
+<div class="headerapes">
   <h4 style="color:orange;">header component</h4>
 </div>
 </template>
@@ -19,7 +19,7 @@ export default {
 }
 </script>
 <style scoped>
-.header{
+.headerapes{
   color:orange;
   font-weight: bolder;
 }

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">
-		<Header>default header component</Header>
+		<HeaderApes>default header component</HeaderApes>
 		<!-- <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 Header from './common/Header.vue';
+import HeaderApes from './common/HeaderApes.vue';
 import i18n from "./i18n.js";
 import { useI18n } from 'vue-i18n';
 
@@ -59,7 +59,7 @@ const app=createApp({
     Login,
     Register,
     File,
-    Header
+    HeaderApes
   },
   data(){
     return{