一、前言
作为一个asp.net程序员，当发现Vue.js的存在时就爱上它，但是在asp.net应用中使用Vue一时让我无从上手。直到最近有了点心得。就计划把之前做的一个记账应用前端改为Vue2实现。
二、效果如下

这个是之前做一个小应用，使用asp.net+Mui做的，也算是前后台分离的。

三、新程序的构思

依然使用asp.net作为后台，因为就熟悉这个。
前台选用Vue2.js。
ui选用mint-ui，本考虑用ElementUI,但是mint-ui相对简单较小，而且是专为手机web而生。
图标依旧选择font-awesome，毕竟没有美工给设计画图，这个库的图标挺多将就用吧。
图表选择echart.js，针对vue.js而生的图表控件没有找到，找来找去还是echart好用些。

四、新程序页面设计如下

记账页面



因为没有九宫格样式，就简单点排版吧。使用和以前一样。

统计页面


和之前稍微改变了些。感觉更加美观了点。
五、后台接口api设计

获取记账类型接口GetBillTypes
记账接口AddBill
删除记录DeleteBill
获取列表GetBills
获取总数GetTotalCount
获取统计值GetCount    

本文由职坐标整理并发布，希望对同学们有所帮助。了解更多详情请关注职坐标移动开发之WebApp频道！