1、打开Visual Studio 2017，如下图所示：
2、菜单栏中选择“文件”->“新建”->“项目”，如下图所示：
3、在弹出的新建项目对话框中，选择“Web”->“ASP.NET Web应用程序钱砀渝测（.NET Framework）”,输入项目的名称和路径，然后点击“确定”，如下图所示：
4、模板选择“MVC”，然后点击“确定”，如下图所示：
5、右键项目解决方案，选择“管理解决方案 Nuget 的程序包”，如下图所示：
6、选择浏览tab，输入框中的地方输入vue，选择安装的位置，然后点击“安装”，如下图所示：
7、在控制台中会显示安装进程，如下图所示：
8、打开Scripts文件夹，我们可以看到增加了vue.js和vue.min.js，然后项目中直接应用vue.min.js文件即可，如下图所示：
9、打开Index.cshtml，添加如下代艨位雅剖码，如下图所示：@{ Layout = null;}<稆糨孝汶;!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>学生列表</title> <script src="~/Scripts/vue.min.js"></script> <style type="text/css"> .bg { background: red; } </style></head><body> <div id="demo"> <label>姓名</label> <input type="text" id="name" v-model="name" /> <label>性别</label> <input type="text" id="gender" v-model="gender" /> <label>年龄</label> <input type="text" id="age" v-model="age" /> <label>爱好</label> <input type="text" id="hobby" v-model="hobby" /> <button v-on:click="AddStuList">添加</button> <table border="1" cellspacing="5" cellpadding="5" v-show="stuList.length"> <caption><h3>学生列表</h3></caption> <tr> <th>状态</th> <th>学号</th> <th>姓名</th> <th>性别</th> <th>年龄</th> <th>爱好</th> <th>操作</th> </tr> <tr v-for="(item,index) in stuList" :class="{bg:item.isChecked}"> <td><input type="checkbox" name="" id="" value="" v-model="item.isChecked" /></td> <td>{{index+1}}</td> <td>{{item.name}}</td> <td>{{item.gender}}</td> <td>{{item.age}}</td> <td>{{item.hobby}}</td> <td><button v-on:click="delStuList(item)">删除</button></td> </tr> </table> </div> <script> var list = [ { name: "张三", gender: "男", age: "12", hobby: "睡觉", isChecked: false }, { name: "张三", gender: "男", age: "12", hobby: "睡觉", isChecked: false } ]; var vm = new Vue({ el: "#demo", data: { stuList: list, name: "", gender: "", age: "", hobby: "", isChecked: "" }, methods: { AddStuList: function () { var stu = { name: this.name, gender: this.gender, age: this.age, hobby: this.hobby, isChecked: this.isChecked } this.stuList.push(stu); this.name = ''; this.gender = ''; this.age = ''; this.hobby = ''; isChecked = ''; }, delStuList: function (item) { var index = this.stuList.indexOf(item); this.stuList.splice(index) } } }); </script></body></html>
10、运行浏览项目，可以看到页面效果，这样一个简单的在ASP.NET MVC中使用Vue.js实现的table展示功能，如下图所示：
