码农必备：自制Github贡献日历，见证你的代码人生！

2023-06-27 04:43:44

代码的印记，成就的勋章：用 Vue 打造你的 GitHub 贡献日历

作为一名程序员，在 GitHub 上留下你的代码印记是一件令人自豪的事情。每天遨游在代码的海洋中，每一次提交、每一次贡献，都为你的编程人生增添一抹亮丽的色彩。而贡献日历，正是记录你代码历程的最佳勋章！

贡献日历：你的编程足迹

贡献日历，顾名思义，就是记录你在 GitHub 上的贡献情况，每天一个格子，绿色代表有贡献，灰色代表没有贡献。日复一日，格子逐渐填满，你的编程足迹也随之清晰可见。回头翻看贡献日历，就像是在浏览一本独一无二的编程日记，每一格都承载着你的辛勤付出和成就感。

Vue助力，轻松实现贡献日历

今天，我们就来一起动手，用 Vue 来实现一个贡献日历组件，让你轻松记录你的 GitHub 贡献历程。

动手实践：用 Vue 构建你的贡献日历

1. 创建项目

首先，创建一个新的 Vue 项目。你可以使用 Vue CLI 或其他你喜欢的脚手架工具。

2. 安装依赖

接下来，我们需要安装一些必要的依赖。

npm install vue-github-calendar

3. 创建组件

在你的 Vue 项目中，创建一个新的组件文件，比如 GithubCalendar.vue。

<template>
  <div class="github-calendar">
    <div class="calendar-header">
      <h1>贡献日历</h1>
    </div>
    <div class="calendar-body">
      <div v-for="day in days" :key="day" class="calendar-day">
        {{ day }}
      </div>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import VueGithubCalendar from 'vue-github-calendar'

export default Vue.extend({
  components: {
    VueGithubCalendar
  },
  data() {
    return {
      days: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31]
    }
  }
})
</script>

<style>
.github-calendar {
  width: 100%;
  margin: 0 auto;
}

.calendar-header {
  background-color: #f5f5f5;
  padding: 10px;
  text-align: center;
}

.calendar-body {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-gap: 10px;
}

.calendar-day {
  width: 50px;
  height: 50px;
  background-color: #ffffff;
  border: 1px solid #cccccc;
  text-align: center;
  line-height: 50px;
  font-size: 14px;
}
</style>

4. 使用组件

现在，你就可以在你的 Vue 项目中使用这个组件了。

<template>
  <div id="app">
    <github-calendar></github-calendar>
  </div>
</template>

<script>
import GithubCalendar from './components/GithubCalendar.vue'

export default {
  components: {
    GithubCalendar
  }
}
</script>