[纯前端]打造自己的ORK管理软件

OKR（Objectives and Key Results）即目标与关键成果法，可以理解为对目标完成情况的一种管理方法。
一般需要列出当前周期的目标，然后列举一些关键结果来衡量目标的完成情况。

我个人的情况是，以每两个月为一个周期设定自己的目标。最初都是用markdown记录，每次列出表格，写下目标，结果，进度，最后给自己算分数。

然而这个算分的过程每次都得重新计算，十分麻烦，而且表格也得手工维护，总之就是麻烦。于是就有了写个软件管理的想法。
正好自己主要是做后端，所以想学习下前端知识，于是把这款软件定位在web应用上。

1. 产品设计

先给自己写了个简单的PRD（产品需求文档），大概自己能看懂就ok，理了理思路。传送门

2. 环境配置

1. 安装npm，获取npm
2. 安装vue，官方安装方法
3. 用IDEA作为IDE

3. 新建项目

使用命令vue ui开启图形界面，新建项目，有个默认初始化git选项，按照喜好可要可不要

“预设”选项，选择“手动”，然后勾上这些包vuex和router，不选包linter

之后勾选使用html5历史模式

进入项目web管理页面后，添加element-ui模块

项目建立后导入到IDEA，就可以开始编写代码了。

4. 难点记录

这一部分只挑一些重点来说，剩余的可以参考git仓库代码：ot

主要用了两个页面，App.vue作为整个门面，保持不变，主要用于展示OKR的可选月份，图中红色圈出的部分即是。Home.vue承接OKR的展示部分，为图中的非红色部分。

月份展示

提前算好月份列表，默认显示当前双月的目标。这里用v-model指定默认打开的tab。详细参考：官方文档-tabs
注意<router-view>别放在循环里面，这样会产生多个，实际上我们只需要一个。

<el-tabs tab-position="left"