6.2 组件设计：游戏卡片Game

首先设计游戏卡片组件，也就是这一部分：
在src/components文件夹下创建文件Game.vue，它的template部分如下：
<template>
    <div class="game_list" style="clear: both;">
        <div class="item_img" onclick="gameDetail('3768')">
            <img class="gameIcon" src="https://img.d.cn/cp_admin/icon/4484/be140cf3191820d73b15bd6e2119cc38.png">
        </div>
        <div class="item_content" onclick="gameDetail('3768')">
            <span class="game_channel">(当乐)</span>
            <span class="game_name">三国杀<span style="color: red">5.0</span>
            <span class="discount">折</span>
            </span>
            <span class="intro">应用描述：《三国杀》2020年十佳卡牌游戏《三国杀》</span>
        </div>
        <div class="item_download">
            <span class="dow">下载地址:</span>
            <img class="platformicon" onclick="download(this)" data-url="https://pkg.d.cn/7NN1DPaO" src="https://www.codessp.cn/wxImage/android.png">
        </div>
    </div>
</template>
这个是展示单个游戏的组件，本来是不需要路由的，但为了测试方便，在路由（src/router/index.js）中配置/game，以便访问本组件。以下是访问页面：
script部分,Game组件有一个game属性，它的值是外部指定的，这个game值就包含了游戏的所有数据包括游戏名字、图标，下载地址等等。但由于此时Game还是模拟数据，game目前没有什么用处，后面再更新。
export default{
    name:"Game",
    props:{
        game:Object //外部传入的所有Game数据
    }
}

要注意的是Game组件本身不需要取数据，它的数据由GameFrame给定，所以Game组件有一个属性game（props），（组件属性的设置见3.3组件的数据和属性
本节的游戏数据都是固定的，下一节，将展示如何制定game属性，从而显示不同的游戏。