Asp.net+Vue+EmelentUI的实现(一)框架搭建

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