X-template 如何轉換到Vue cli中?

其實X-template的概念就是component

• App.vue中

<Card
  :store="item"
  v-for="(item, key) in filterData"
  :key="key"
  @switchcard="switchGeo"
></Card>

import Card from "./components/Card.vue";

export default{

components:{
   Card
    }
}

所以相對的, 我也要新建一個Vue檔案(name:Card)
框架的概念, 很像是我的資料分門別類放好的感覺

<template>
    <div class="card" @click="setFocus">
      <div class="card-body" :class="store.properties.mask_adult > 30 ? 'hightlight': '' ">
        <h5 class="card-title">{{store.properties.name}}</h5>
        <p class="card-text">成人口罩: {{store.properties.mask_adult}} | 兒童口罩: {{store.properties.mask_child}}</p>
        <p>地址:
          <a :href="getHref(store.properties.address)" target="_blank">{{store.properties.address}}</a>
        </p>
        <small class="card-text">最後更新時間: {{store.properties.updated}}</small>
      </div>
    </div>  
</template>

說難也不會很難, 電腦要沒電了, 先補充到這邊～～