<template>
    <div class="contains">
        <!-- <div class="main">
            <swiper :options=‘swiperOption‘ :not-next-tick=‘‘></swiper>
        </div> -->
        <slide >

            <div v-for="(item,index) in banner" :data=‘sliderarr‘ :key="item+index">
                <a>
                    <!-- <img class="clicks" :src=‘item.img_url‘ @load="loadImg" @click=‘goto_url()‘> -->
                    <img class="clicks" :src=‘item.img_url‘  @click=‘goto_url()‘>
                </a>
            </div>
        </slide>
        <p class="news"><b>幸運欄</b><span>恭喜{{users}}在{{games}}中獲得<em>{{count}}</em>個金幣</span></p>
   </div>
  </template>

<script>
import {swiper,swiperSlide} from ‘vue-awesome-swiper‘
import slide from ‘../oslider‘
export default{
    components: {
        slide
    },
    data () {
        return {
            sliderarr:[],
            banner:[
                {
                    img_url: "",

                },
                {

                }
            ],
            
            users:‘“千尺幹頭”‘,
            count:‘8288‘,
            games:‘猜球遊戲‘
        }
    },
    methods: {
        goto_url(){

       }
  }
}
</script>

<style lang="scss" scoped>
@import ‘swiper/dist/css/swiper.css‘;
.contains{
    p{
        margin:0;
        padding:0;
        width:100%;
    }
}
 .news{
        b{
            // display: inline-block;
            padding:0.02rem;
            border-radius: 0.02rem;
            background-color: #64ce66;
            font-size: 0.12rem !important;
            margin-left: 0.2rem;
            margin-right: 0.2rem;
            color:#fff;
        }
        span{
            font-weight: bolder;
        }
        em{
            color:#c11f2e;
            font-style: normal;
        }
        background: #f6f6f6;
        height: 0.5rem;
        line-height: 0.5rem;
        font-size: 0.14rem;
    }
</style>

一般情況下的APP首頁會單獨拿出來做為一個組件，首頁裏面的內容就需要考慮 組件化開發；

再建立其他組件文件夾；

例如一個子組件需要渲染再index組件中；

子組件代碼如上，這個裏面只需要寫組件內的代碼不需要管其他；

然後再在根組件中導入。聲明，使用；如下根組件代碼

<template>
  <div class="home">
        <Heador/>
        <Slider/>
        <Plays/>
        <Hotgame/>
        <Footballguess/>
        <Basketballguess/>
        <Hotreward/>
  </div>
</template>

<script>
import Heador from "../components/index/heador.vue"
import Slider from "../components/index/Slider.vue"
import Plays from "../components/index/plays.vue"
import Hotgame from "../components/index/Hotgame"
import Footballguess from "../components/index/FootballGuess"
import Basketballguess from "../components/index/BasketballGuess"
import Hotreward from "../components/index/Hotreward"



export default {
  components: {
      Heador,
      Slider,
      Plays,
      Hotgame,
      Footballguess,
      Basketballguess,
      Hotreward
  },
  name:"home"
}
</script>

<style lang="scss">

</style>

使用vue-cli構建工具構建vue項目時候組件的使用