Mvc是今年比较流行的一种web开发模式 个人觉得MVC是一种简单易懂、高效的开发模式;关于开发模式还有MVVM, vue.js就是这种模式，这里就不讲什么是MVC、 MVVM了， 有兴趣可以百度了解一下。
主要用到的技术:
Asp.net MVC 5
IView + Vue.js（这两者是完美搭档， IView：基于Vue.js的UI）
require.js （按需加载js模块， 详解更多JS模块化工具requirejs教程，或进入require.js官网）
sql server 2017
Visual Studio 2017
下面我们将以一个(SecurityDemo)通用权限系统demo为例:
目录
1. 新建项目
点确定 -->
2. 添加RequireJs , IView + Vue.js到项目
菜单选择工具 --》 NuGet包管理器 --》 管理解决方案Nuget程序包：
a.安装requirejs:（也要安装require.css程序包，因为IView.css将作为IView的依赖引入）
找到Requirejs的程序包， 右边列表项目里勾选指定的项目，点击“安装“按钮
安装成功后，会看到多了下面几个文件
b.安装IView + Vue.js
这里版本并不是最新的， 安装成功后， 可以去官网拿最新的替换现在的，我们这里也是这样。（IView官网）
安装成功后， 多了下面这些文件：
这些文件我们也是要替换的，资源URL, 找到我们要替换的文件，下载后替换掉 ，官网好像不能打包下载，我们可以用迅雷批量下载：
右键菜单点击迅雷下载全部链接，取消下载html类型的文件
vue.js官网最新下载vue.js, vue.min.js
第2章 第一个实例
文件结构：
主要文件：
//index.cshtml
@{
ViewBag.Title = "Index";
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Index</title>
<link href="~/Content/Iview/iviewplus.css" rel="stylesheet" />
<script type="text/javascript" src="~/Scripts/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="/scripts/require.js" data-main="/Scripts/Base/main"></script>
</head>
<body>
<div id="app" v-cloak>
<i-table stripe :columns="columns1" :data="data1"></i-table>
<i-button @@click="show">Click me!</i-button>
<Modal v-model="visible" title="Welcome">Welcome to iView</Modal>
<span>{{visible}}</span>
<i-input v-model="myname" placeholder="Enter something..." style="width: 300px"></i-input>
<i-button :size="buttonSize" type="primary" @@click="clicked">
Forward
<Icon type="ios-arrow-forward" />
</i-button>
</div>
<script>
$(document).ready(function () {
require(["../../Scripts/App/VueDemo/Home/index"]);
});
</script>
</body>
</html>//main.js
//配置模块
require.config({
waitSeconds: 15,
baseUrl: './',
paths: {
'jquery': '/Scripts/jquery-1.10.2.min.js',
'jqueryvalidate': '/Scripts/jquery.validate.min',
'modernizr': '/Scripts/modernizr-2.6.2',
'respond': '/Scripts/respond',
'iview': '/Scripts/IView/iview.min',
'vue': '/Scripts/vue.min',
'BaseApp': '/Scripts/Base/BaseApp',
'VueResource': '/Scripts/vue-resource.min',
'less': '/Scripts/less-1.5.1.min'
},
shim: {
'jqueryforval': {
exports: 'jquery'
},
'jqueryvalidate': {
exports: '$',
deps: ['/Scripts/jquery-1.10.2', '/Scripts/jquery.validate.unobtrusive']
},
'vue':{
exports: 'Vue'
},
'iview': {
exports: 'iview',
deps: ['css!/Content/Iview/iview.css','css!/Content/Iview/iviewplus.css', 'vue']
},
VueResource: {
exports: 'VueResource',
deps: ['vue']
}
},
map: {
'*': {
css: '/scripts/css.min.js'
}
}
////加上时间戳
//,urlArgs: "bust=" + (new Date()).getTime()
});
// 注册事件
require(['vue', 'iview'], function (Vue, iview) {
Vue.use(iview);
});
//BaseApp.js
define(['vue', 'less', 'iview'], function (Vue, less, iview) {
// 使用严格模式
'use strict';
var BaseApp = function () {
return {
Config: {},
Instance: {},
Run: function (appId) {
var self = this;
if (appId) {
self.Config.el = appId;
}
$(document).ready(function () {
self.Instance = new Vue(self.Config);
});
},
IsEmptyStr: function (str) {
if (!str) { str = ""; }
if (str.length <= 0) { return true; } else { return false; }
},
isEmpty: function (o) {
if (typeof (o) == "undefined") { return true; }
if (!o) { return true; }
if (typeof (o) == "object") {
for (var n in o) { return false; }
return true;
}
if (o instanceof Array) {
if (!o.length) { return true; }
}
return false;
}
}
}();
return BaseApp;
}
);
//index.js
define(['BaseApp'], function (BaseApp) {
// 使用严格模式
'use strict';
$(function () {
BaseApp.Config = {
el: '#app',
data: {
visible: false,
buttonSize: 'large',
myname:'LoveLearning',
columns1: [
{
title: 'Name',
key: 'name'
},
{
title: 'Age',
key: 'age'
},
{
title: 'Address',
key: 'address'
}
],
data1: [
{
name: 'John Brown',
age: 18,
address: 'New York No. 1 Lake Park',
date: '2016-10-03'
},
{
name: 'Jim Green',
age: 24,
address: 'London No. 1 Lake Park',
date: '2016-10-01'
},
{
name: 'Joe Black',
age: 30,
address: 'Sydney No. 1 Lake Park',
date: '2016-10-02'
},
{
name: 'Jon Snow',
age: 26,
address: 'Ottawa No. 2 Lake Park',
date: '2016-10-04'
}
]
},
methods: {
show: function () {
this.visible = !this.visible;
},
clicked: function () {
alert("Clicked!");
}
}
};
return BaseApp.Run();
});
});
运行后的效果如下：
这里我们已经初步完成了一个简单的IView的Demo，下一章将会将如何封装到.Net htmlhelper中。