基于vue3的类似github贡献图组件

最新推荐文章于 2024-04-17 09:41:36 发布

qq_45952708

最新推荐文章于 2024-04-17 09:41:36 发布

阅读量648

点赞数 1

CC 4.0 BY-SA版权

文章标签： vue.js

本文链接：https://blog.youkuaiyun.com/qq_45952708/article/details/128752786

本文介绍如何在个人博客项目中创建一个基于Vue3的GitHub贡献图组件，用于显示文章发布和更新频率。作者在找不到合适的开源组件后，决定自行开发并将其发布到npm库中。详细步骤包括组件效果展示和使用方法，对于使用TypeScript的项目，还需在根目录声明模块。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近在写自己的博客网站的时候，看到github贡献图那个不错，可以用来展示和统计我近一年文章发布数量和更新频率，于是很自然地在网上找开源组件，找到了一个类似github贡献图的开源组件，但根据文档试了发现用不了，也没有找到第二个，于是就自己写了一个，已发布到了npm库中。

效果

使用

// Main.ts
// npm i vue3-ctb --save

import { createApp } from 'vue'
import App from './App.vue'
// 引入插件，用于全局注册贡献图组件
import Ctb from 'vue3-ctb'
// 引入组件样式
import 'vue3-ctb/contributes.css'

const app = createApp(App)
// 全局注册
app.use(Ctb)
app.mount('#app')

如果项目用到了ts，需要在根目录的.d.ts文件中声明这个模块。

// *.d.ts
declare module 'vue3-ctb'

然后直接使用

<template>
  <div id="app">
    <Contributes :data="data" v-bind="config" />
  </div>
</template>

<script setup lang="ts">
const data = [
  {
    date: '2022-06-01',
    count: 2