components/card下创建CardTag.vue：

<template>
    <el-card :body-style="{ padding: '8px 18px' }">
        <div slot="header" class="my-tag-header">
            <span>最热标签</span>
            <a @click="moreTags" class="my-pull-right my-tag-more">查看全部</a>
        </div>

        <ul class="my-tag-list">
            <li class="my-tag-item" v-for="t in tags" :key="t.id">
                <!--type="primary"-->
                <!--round:是否圆角按钮,plain:是否朴素按钮-->
                <el-button @click="tag(t.id)" size="mini" type="primary" round plain>{{t.tagName}}</el-button>
            </li>
        </ul>
    </el-card>
</template>
<script>
    export default
    {
        name:"ArticleTag",
        props:
        {
            tags:Array
        },
        data()
        {
            return{

            }
        },
        methods:
        {
            moreTags()
            {
                this.$router.push('/tag/all');
            },
            tag(id)
            {
                this.$router.push({path:`/tag/${id}`,});
            }
        }
    }
</script>

<style>
    .my-tag-header
    {
        font-weight: 600;
    }

    .my-tag-more
    {
        font-size: 14px;
        color: #78b6f7;
    }

    .my-tag-list
    {
        list-style-type: none;
    }

    .my-tag-item
    {
        display: inline-block;
        padding: 4px;
        font-size: 14px;
        color: #5FB878;
    }

    .my-tag-item a:hover
    {
        text-decoration: underline;
    }
</style>

上面有两个触发方法，一个是查看全部的tag，跳转到/tag/all

一个是查看标签下的文章，跳转到/tag/{tagId}

需要外部传值 tags，标签列表，其中Tag必须有id，tagName这两个属性

添加到侧边栏(views下的Index.vue)

<!--body-->
<template>
  <div>
    <el-container>
        <el-main class="myArticles">
            <!--文章列表-->
            <ArticleScrollPage>

            </ArticleScrollPage>
        </el-main>
        <el-aside>
            <mine></mine>
            <article-tag :tags="hotTags"></article-tag>
        </el-aside>
    </el-container>
  </div>
</template>

<script>
    import ArticleScrollPage from "@/components/common/ArticleScrollPage"
    import Mine from "@/components/card/Mine"
    import ArticleTag from "@/components/card/ArticleTag"
    import {getHotTags} from "@/api/tag";
    export default
    {
        name: '',
        components:
        {
            ArticleScrollPage,
            mine:Mine,
            "article-tag":ArticleTag

        },
        data()
        {
            return{
                hotTags:Array
            }
        },
        created()
        {
            this.getHotTags();
        },
        methods:
        {
            getHotTags()
            {
                getHotTags().then((res)=>
                    {
                        if(res.data.success)
                        {
                            this.hotTags = res.data.data
                        }else
                        {
                            this.$message.error(res.data.msg)
                        }
                    }).catch(()=>
                    {
                        this.$message.error("系统出错");
                    }).finally(()=>
                    {

                    })
            }
        }
    }
</script>

<style scoped>
.el-container
{
    width: 960px;
}
/*右侧边栏*/
.el-aside
{
    /*右侧和主部空了20px的距离*/
    margin-left: 20px;
    width: 260px;
}
/*主栏*/
.el-main {
    padding: 0px;
    line-height: 16px;
}
/*文章列表*/
.el-card {
    border-radius: 0;
}
/*设置卡片最后一个子元素除外的样式，第一个不用和上面有间隙*/
.el-card:not(:first-child)
{
    margin-top: 20px;
}
</style>