自定義一個通用header元件，該header裡包含一個text元件。這樣其他模組在使用header時直接匯入註冊引用即可。

自定義元件

1. 新建 top_header.vue 檔案

2. 在 top_header.vue 中完成如下程式碼

   <template>
       <div class="topheader">
       <text>this is custom top header</text>
       </div>
   </template>
   
   <script>
   export default
    
    {}
   </script>
   
   <style scoped>
       .topheader{
           background-color: red;
           padding: 10px;
       }
   </style>
   

   • template 標籤中放置需要的元件並設定相關樣式，需要注意的是該標籤中的最外層標籤只能是 div 標籤
   • script 標籤是放置指令碼
   • style 標籤完成樣式，對於樣式的使用，必須使用類名或者ID進行設定

引用自定義元件

1. 在index.vue 中的 script

   標籤裡匯入自定義元件

   import topHeader from './top_header.vue'

2. 在 components 完成 匯入元件的註冊

   components: {
       topHeader
   }

3. 在 index.vue中模版裡 使用自定義的元件

   <template>
   <div class="wrapper">
   <topHeader></topHeader>
   <text class="greeting">The environment is ready!</text>
   <router-view/>
    
   
   </div>
   </template>

4. 完整程式碼如下

   <template>
     <div class="wrapper">
       <topHeader></topHeader>
       <text class="greeting">The environment is ready!</text>
       <router-view/>
     </div>
   </template>
   
   <script>
   import topHeader from './top_header.vue'
   export default {
     name: 'App',
     data () {
       return {
         logo: 'https://gw.alicdn.com/tfs/TB1yopEdgoQMeJjy1XaXXcSsFXa-640-302.png'
       }
     },
     components: {
       topHeader
     }
   }
   </script>
   
   <style scoped>
     .wrapper {
       justify-content: center;
       align-items: center;
     }
     .logo {
       width: 424px;
       height: 200px;
     }
     .greeting {
       text-align: center;
       margin-top: 70px;
       font-size: 50px;
       color: #41B883;
     }
     .message {
       margin: 30px;
       font-size: 32px;
       color: #727272;
     }
   </style>
   

效果預覽

web端

1. 在編寫 vue程式碼時 如果開啟了 npm run serve 和npm run dev ，進行儲存操作，就會自動編譯同時web重新整理

android 端

1. 同樣的操作，如果此時開啟了 npm run serve 和npm run dev ，進行儲存操作後會自動編譯，生成對應的js檔案
2. 在android studio上直接 run 就可以看到效果了