原文链接：https://blog.csdn.net/xxdddail/article/details/89876055
vue对于web端的开发优势是很明显的，特别是单页应用，响应、数据等都很明显，而且开发效率也高，又有很多资料可查、有社区的支持。但vue对于开发较大的项目时，则会显得笨重，因为编译成了单页应用，非常臃肿，首次加载变的很慢。而且在使用VS来开发时，虽然VS可以创建vue的项目，但是基于node.js来编译的，不好操作，而且经常出现卡死现象，于是就考虑有没有其他的方式来应用vue。
vue本质上是一个对UI的渲染，可以认为是view的渲染层，而emelent ui是基于vue的控件库，本上相关的js则可正常工作，对于网网请求可以通过vue-resource来达成，再加上asp.net构建的webapi来实现服务的请求，那么基本上是可以成型的，基于这样的思路，于是有了后面的开发实践。
1.新建一个空的web项目
2.使用nuget安装vue、vue-resource、vue.js.element.ui
安装后的项目可以看到ElementUI、vue、vue-resource
3.创建App_Start文件夹，添加WebApiConfig.cs的类，添加System.Web.Http的引用
WebApiConfig.cs的代码如下
/// <summary> /// webapi的配置 /// </summary> public static class WebApiConfig { /// <summary> /// 注册 /// </summary> /// <param name="config"></param> public static void Register(HttpConfiguration config) { // Web API 配置和服务 // Web API 路由 config.MapHttpAttributeRoutes(); config.Routes.MapHttpRoute( name: "DefaultApi", routeTemplate: "api/{controller}/{action}/{id}", defaults: new { id = RouteParameter.Optional } ); } }
使用nuget安装AspNet.WebApi，否则config.MapHttpAttributeRoutes会报错。
4.添加Global.asax
使用nuget安装AspNet.WebApi.WebHost
在Global类的Application_Start中添加代码
protected void Application_Start(object sender, EventArgs e) { GlobalConfiguration.Configure(WebApiConfig.Register); }
5.创建Controller文件夹，添加LoginController类用于用户的登入
LoginController类的代码如下
public class LoginController : ApiController { /// <summary> /// 登录 /// </summary> /// <param name="account"></param> /// <param name="password"></param> /// <returns></returns> [HttpGet] public BaseDataPackage<UserData> Login(string account,string password) { //使用account和password验证用户 UserData userData = new UserData(); userData.UserGuid = Guid.NewGuid().ToString(); userData.UserName = "测试用户"; var result = new BaseDataPackage<UserData>(); result.Data = userData; result.Status = ApiStatusCode.OK; result.Message = "登录成功"; return result; } }
/// <summary> /// 状态码 /// </summary> public class ApiStatusCode { /// <summary> /// OK /// </summary> public const int OK = 0; /// <summary> /// 失败 /// </summary> public const int FAIL = 1; /// <summary> /// 异常 /// </summary> public const int EXCEPTION = 2; }
public class BaseDataPackage<T> { public int Status { get; set; } public string Message { get; set; } public T Data { get; set; } }
6.建立Login文件夹，添加界面文件Login.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Login.aspx.cs" Inherits="AspNetVueElementUI.Login.Login" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src="/Scripts/vue.js"></script> <script src="/Scripts/vue-resource.js"></script> <script src="/Scripts/ElementUI/element-ui.js"></script> <script src="/Scripts/kit.js"></script> <script src="/Scripts/global.js"></script> <link href="/Content/ElementUI/element-ui.css" rel="stylesheet" /> <title>管理系统</title> <style> .el-row { margin-bottom: 20px; } .login-box { margin-top: 20%; margin-left: 40%; } </style></head><body> <div class="login-box" id="app"> <el-row> <el-col :span="8"> <el-input id="name" v-model="name" placeholder="请输入帐号"> <template slot="prepend"> 帐号 </template> </el-input> </el-col> </el-row> <el-row> <el-col :span="8"> <el-input id="password" v-model="password" type="password" placeholder="请输入密码"> <template slot="prepend"> 密码 </template> </el-input> </el-col> </el-row> <el-row> <el-col :span="8"> <el-button id="login" v-on:click="check" style="100%" type="primary" v-loading.fullscreen.lock="logining">登录</el-button> </el-col> </el-row> </div></body> <script type="text/javascript"> window.onload = function () { new Vue({ el: '#app', data: { name: '', password: '', logining: false }, methods: { check: function (event) { //获取值 var name = this.name; var password = this.password; if (name == '' || password == '') { this.$message({ message: '账号或密码为空！', type: 'error' }) return; } var turnUrl = kit.getQueryString('ReturnUrl'); if (turnUrl == undefined || turnUrl == null || turnUrl.length <= 0) { turnUrl = "/default.aspx"; } var url = '/API/Login/Login?account=' + name + "&password=" + password; this.logining = true; this.$http.get(url).then(function (res) { var result = res.body; this.$message({ message: result.Message, type: result.Status == 0 ? 'success' : 'error' }) this.logining = false; if (result.Status == 0) { global.setUser(result.Data.UserGuid, result.Data.UserName); window.location = turnUrl; } }, function (e) { console.log(e); this.$message({ message: '登录异常', type: 'error' }) this.logining = false; }); } } }) }</script></html>
7.添加默认页default.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="default.aspx.cs" Inherits="AspNetVueElementUI._default" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title></head><body> <div> 欢迎使用 </div></body></html>
8.运行代码
通过以上的步骤，就实现了简单的框架搭建，Login.aspx使用vue和element ui来实现登录的界面，controller文件夹下实现登录访问的api，但要对整个网站进行登录验证，则要使用asp.net的验证机制，请参看《Asp.net+Vue+EmelentUI的实现(二)登录验证》