搭建.net Core WebApi 与 Vue Cli框架

此文章我将不会描述怎样使用Vue Cli和创建Vue项目。

1. 创建一个.net Core 的项目。

重点看图 在这里不要选api 要选React.js 原因是我们通过React.js模板来改成Vue Cli项目

2. 修改标题startup.cs

3. 删除ClientApp中的所有文件夹

4.在ClientApp中通过vue cli创建一个vue项目，由于vue项目不支持大写开头的项目文件名，你可以创建一个client-app文件夹，在这里创建一个vue项目然后在将client-app文件夹中的所有文件复制出来，放到ClientApp文件夹中，再删除client-app文件夹。

5.通过Nuget程序包下载VueCliMiddleware插件。

6.将此代码粘贴复制到如图位置

endpoints.MapToVueCliProxy(
                        "{*path}",
                        new SpaOptions { SourcePath = "ClientApp" },
                        npmScript: (System.Diagnostics.Debugger.IsAttached) ? "serve" : null,
                        regex: "Compiled successfully",
                        forceKill: true
                        );

7.修改 项目名.csproj 文件

8.设置跨域

到这一步基本就把框架搭建好了。现在咱们测试一下这个框架是否好使。

测试

1.首先创建一个控制器HelloWorldController.cs

public IActionResult Index()
        {
            var data = new[]
            {           
                "Freezing", "Bracing", "Chilly", "Cool", "Mild", "Warm", "Balmy", "Hot", "Sweltering", "Scorching"
            }; 
            return Json(data);
        }

2.在vue项目中下载axios 在main.js中引用 并注意图中标记的位置

3.修改about.vue文件

4.当你运行项目看见这个界面时不要惊慌

这是因为我们访问的端口号已经不是5001了。而是这个如图

并且当你不想要每次运行窗口都要自动打开浏览器这进行以下操作。
1.右键项目属性。
2.找到调试将浏览器的对勾删掉。（当然是在停止项目运行的情况下）

3.结果 当你访问并出现这个界面是证明你搭建的框架成功了