DSkin封装的WebUI开发模式开发桌面应用，使用Vue很方便。使用起来有点像WPF
下面用 element-UI 做个简单的例子。
运行效果；可以自己根据需求改布局效果。
主框架的element-UI 模板代码
<div id="page" class="shadow">
<el-container>
<el-header onmousemove="if(event.button == 0){ MoveWindow(); }" ondblclick="Command_MaxOrNor()">
<el-menu :default-active="activeIndex"
class="el-menu-demo"
mode="horizontal"
@select="handleSelect"
background-color="#545c64"
text-color="#fff"
active-text-color="#ffd04b">
<el-menu-item index="1">DSkin WebUI开发</el-menu-item>
<el-submenu index="2">
<template slot="title">
我的工作台
</template>
<el-menu-item index="2-1">选项1</el-menu-item>
<el-menu-item index="2-2">选项2</el-menu-item>
<el-menu-item index="2-3">选项3</el-menu-item>
<el-submenu index="2-4">
<template slot="title">
选项4
</template>
<el-menu-item index="2-4-1">选项1</el-menu-item>
<el-menu-item index="2-4-2">选项2</el-menu-item>
<el-menu-item index="2-4-3">选项3</el-menu-item>
</el-submenu>
</el-submenu>
<el-menu-item index="3" disabled>消息中心</el-menu-item>
<el-menu-item index="4">订单管理</el-menu-item>
<span index="5" id="minimize" class="sys-btn" onclick="Command_Min();" onmousemove="event.stopPropagation()">0</span>
<span index="6" id="maximize" class="sys-btn" onclick="Command_MaxOrNor()" onmousemove="event.stopPropagation()">1</span>
<span index="7" id="close" class="sys-btn" onclick="Command_Close()" onmousemove="event.stopPropagation()">r</span>
</el-menu>
</el-header>
<el-container>
<el-aside width="200px">
<el-menu default-active="2"
class="el-menu-vertical-demo"
background-color="#545c64"
text-color="#fff"
active-text-color="#ffd04b">
<el-submenu index="1">
<template slot="title">
<i class="el-icon-location"></i>
<span>导航一</span>
</template>
<el-menu-item index="1-1" class="open-page" href="button.html">按钮</el-menu-item>
<el-menu-item index="1-2" class="open-page" href="form.html">表单</el-menu-item>
<el-menu-item index="1-3" class="open-page" href="table.html">表格</el-menu-item>
<el-submenu index="1-4">
<template slot="title">
选项4
</template>
<el-menu-item index="1-4-1">选项1</el-menu-item>
</el-submenu>
</el-submenu>
<el-menu-item index="2">
<i class="el-icon-menu"></i>
<span slot="title">导航二</span>
</el-menu-item>
<el-menu-item index="3" disabled>
<i class="el-icon-document"></i>
<span slot="title">导航三</span>
</el-menu-item>
<el-menu-item index="4">
<i class="el-icon-setting"></i>
<span slot="title">导航四</span>
</el-menu-item>
</el-menu>
</el-aside>
<el-main>
<iframe frameborder="0" allowtransparency="true" src="button.html"></iframe>
</el-main>
</el-container>
</el-container> </div>
其中 activeIndex 是模板中定义的一个属性， handleSelect 是Select事件绑定的方法，我们可以直接在C#中定义这两个，它会自动绑定过来。不需要手动写JS来new 一个Vue对象绑定，这些在DSkin中自动完成了的。
//这个C#代码相当于 JS的 var page=new Vue({el:"#page",data:{ activeIndex:"1",},methods:{handleSelect(a,b,c){ }}});
public class mainframe : DSkin.Forms.MiniBlinkPage
{
string _activeIndex = "";
public string activeIndex
{
get { return _activeIndex; }
set { OnPropertyChanged(value, ref _activeIndex); }
}
[JSFunction]
public void handleSelect(string a, JsValue b, JsValue c)
{
}
}
右下角的内容，我采用的是iframe框架页面来做，这样做方便C#绑定以及 业务逻辑分离到单独C#类中。
简单的表格添加数据的例子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery-1.9.0.min.js"></script>
<script src="js/vue.js"></script>
<link href="css/element.css" rel="stylesheet" />
<script src="js/element.js"></script>
<link href="css/main.css" rel="stylesheet" />
</head>
<body onload="$('body').addClass('body-active');">
<div id="page">
<el-table :data="Data" style="width: 100%">
<el-table-column prop="date" label="日期" width="180">
</el-table-column>
<el-table-column prop="name" label="姓名" width="180">
</el-table-column>
<el-table-column prop="address" label="地址">
</el-table-column>
</el-table>
<el-button onclick="AddData()">添加数据</el-button>
</div> </body>
</html>
其中有一个添加数据的按钮，点击按钮会添加一行数据到表格中
public class table : MiniBlinkPage
{
public table()
{
Data.Add(new data { date = "sdaf", name = "dgsda", address = "hfdgdsfa" });
Data.Add(new data { date = "sdaf测试", name = "dgsda", address = "hfdgdsfa" });
} MiniBlinkCollection<data> data;
//模板中绑定的数据
public MiniBlinkCollection<data> Data
{
get
{
if (data == null)
{
data = new MiniBlinkCollection<data>(this);
}
return data;
}
}
[JSFunction]//按钮调用的添加数据的方法，点击按钮添加一行，同时会更新UI显示出来
public void AddData()
{
Data.Add(new data { date = "测试数据", name = "3sda", address = "gdsa" });
Data.SaveChanges();
}
} public class data
{
public string date { get; set; }
public string name { get; set; }
public string address { get; set; }
}
运行效果
总体来说还是很简单，很方便的，有丰富的前端资源，可以快速开发出自己想要的效果