1.去abp官网生成项目，选择.net core1.x版本
2.Nuget还原包，需装dotnet core1.1等。
3.新增一个entity，并加入到上下文中
4.然后cmd命令行工具切换到项目文件AbpCore.EntityFramewor目录下，输入命令dotnet ef migrations add "initdata" 命令，接着输入dotnet ef database update,执行完成生成数据库.
6.添加刚才添加的entity对应的service层，就是简单的增改查，这里不再详细描述(会动态生成api)
7.新建控制器，view等页面,引入vuejs文件
8.根据动态生成的api完成数据的获取，以及添加，修改
js文件
var _dailyMoneyService = abp.services.app.dailyMoney;
var app = new Vue({
el: "#moneyApp",
data: {
moneyModel: {
id:null,
date:"",
moeny: 0,
desc:""
},
moneyList: []
},
methods: {
getMoneyList:function() {
var _this = this;
_dailyMoneyService.getDailyMoneyList().done(function(result) {
_this.moneyList = result;
});
},
saveMoney: function () {
var _this = this;
_dailyMoneyService.createOrUpdateMoney(_this.moneyModel).done(function () {
location.reload();
});
},
editMoney: function (id) {
var _this = this;
abp.ui.setBusy();
_dailyMoneyService.getMoneyForEdit(id).done(function (result) {
_this.moneyModel = result;
}).always(function () {
abp.ui.clearBusy();
});
$('#MoneyModal').modal();
}
}
});
app.getMoneyList();
view
@*
For more information on enabling MVC for empty projects, visit http://go.microsoft.com/fwlink/?LinkID=397860
*@
@{
Layout = "~/Views/Shared/_VLayout.cshtml";
}
@section scripts
{
<script src="~/view-resources/Views/Money/Index.js" asp-append-version="true"></script>
}
<div id="moneyApp">
<div class="row">
<div class="col-md-12">
<button data-toggle="modal" data-target="#MoneyModal" class="btn btn-primary pull-right"><i class="fa fa-plus"></i>添加消费记录</button>
</div>
</div>
<div class="row">
<table class="table">
<thead>
<tr>
<th>编号</th>
<th>日期</th>
<th>金额</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr v-for="moeny in moneyList">
<td><a href="javascript:void(0)" v-on:click="editMoney(moeny.id)">{{moeny.id}}</a></td>
<td>{{moeny.date}}</td>
<td>{{moeny.moeny}}</td>
<td>{{moeny.desc}}</td>
</tr>
</tbody>
</table>
</div> <div class="modal fade" id="MoneyModal" tabindex="-1" role="dialog" data-backdrop="static">
<div class="modal-dialog" role="document">
<div class="modal-content">
<form name="moneyForm" role="form" novalidate class="form-validation">
<div class="modal-header">
<h4 class="modal-title">
<span v-if="moneyModel.id">编辑消费记录</span>
<span v-if="!moneyModel.id">添加消费记录</span>
</h4>
</div>
<div class="modal-body">
<input type="hidden" v-model="moneyModel.id"/>
<div class="form-group">
<label>日期</label>
<input class="form-control" type="text" v-model="moneyModel.date" required>
</div>
<div class="form-group">
<label>金额</label>
<input class="form-control" type="text" v-model="moneyModel.moeny" required>
</div>
<div class="form-group">
<label>描述</label>
<input class="form-control" type="text" v-model="moneyModel.desc" required>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">@L("Cancel")</button>
<button type="button" class="btn btn-primary blue" v-on:click="saveMoney" ><i class="fa fa-save"></i> <span>@L("Save")</span></button>
</div>
</form>
</div>
</div>
</div>
</div>
9.效果演示
10.疑问，不知道这样使用vue是否符合规范，我感觉有点问题，请各位赐教。