初始化组件和路由
做完了开始界面接下来就是核心的功能记账界面了。在路由内设计好有关记账的界面。
将记账相关的界面和组件取名为item。并套用模版初始化。在开始界面中添加routerlink实现跳转。
抽离MainLayout组件
观察设计稿发现很多组件都用到了类似顶部导航的视图，所以提前抽离出来方便复用。在StartPage页面中进行修改。
在原来的页面中我们需要三个slot插槽，分别是“卡比记账”的title，菜单栏的icon以及剩余的内容做成一个插槽。 用对象的形式来改写：
在原来的startpage中使用MainLayout
功能完全一样，并且实现了复用。
记一笔页面预览（itemcreate）：
Tabs组件
设计功能
因为记账分为收入和支出，两个tab可以随意切换。我们自己来完成一个Tabs组件。
理想效果（设计思路）：
Tabs中有两个Tab分别是收入和支出。用户可以知道选中的是哪一个Tab所以要用到ref对他们进行一个标记，默认为支出。
并且对切换事件进行监听这里命名为onUpdateSelected
这个函数接受一个类型为字符串的name，并且会把refKind变成传来的name
实现功能
Tabs里面的Tab接受一个name，内部是icon列表所以直接用默认插槽就可以。代码如下：
因为我们在设计中规定Tabs中只能有Tab组件所以需要进行一个验证
不是Tab组件会给一个报错。
其中我们定义的数组就是Tabs组件的默认插槽也就是Tab组件，因为这是Tab组件是Tabs子组件的原因可以用slot获取
Tabs组件会渲染收入支出两个Tab，具体通过遍历我们声明的数组，把里面的每一项返回成一个li标签，并且显示他的name。
内容 收入和支出两个不同的Tab对应不同的内容，在设计中我们是通过selected来进行控制。 所以在Tabs组件中加一个class，如果父组件传来了对应selected那么就给添加一个s.selected的类，否则返回空字符串。
给点击添加一个事件监听，在props中设置好ts类型，并添加
这样就与外部对应上了，拿到name，并把name赋值给
refKind.value
但是问题来了V-model可以让这个代码更加简洁。 事件改成‘update:selected’再传值
外部绑定v-model
为了方便阅读把之前声明的array数组改名为tabs
最后内容显示我们选择使用数组的find方法这样直接返回数组的元素。
对于每一项，如果那一项的name是被选中的name那么就获取他。
效果预览：
