前後端分離工程搭建

前端 vue-cli-service

後端 ASP.NET Core WebAPI

1. 後端搭建

1.1 建立項目：

模闆：

Web

->

ASP.NET Core Web 應用程式

->

.NET Framework

->

ASP.NET Core 2.1

->

API

編輯TestProject.csproj，添加GenerateDocumentationFile配置節

<PropertyGroup>
  <TargetFramework>net461</TargetFramework>
  <GenerateDocumentationFile>true</GenerateDocumentationFile>
</PropertyGroup>
           

1.2 配置IIS調試

編輯

Properties

–>

launchSetting.json

檔案

{
  "iisSettings": {
    "windowsAuthentication": false,
    "anonymousAuthentication": true,
    "iis": {
      "applicationUrl": "http://xxxxxx/TestProject",
      "sslPort": 0
    }
  },
  "$schema": "http://json.schemastore.org/launchsettings.json",
  "profiles": {
    "TeamCheck": {
      "commandName": "Project",
      "launchBrowser": true,
      "launchUrl": "api/values",
      "environmentVariables": {
        "ASPNETCORE_ENVIRONMENT": "Development"
      },
      "applicationUrl": "http://localhost:5000"
    },
    "IIS": {
      "commandName": "IIS",
      "launchBrowser": true,
      "launchUrl": "swagger/",
      "environmentVariables": {
        "ASPNETCORE_ENVIRONMENT": "Development"
      }
    }
  }
}
           

1.3 配置Swagger

詳細操作見往期部落格 ASP.Net MVCWebApi下內建Swagger UI

2.前端工程

2.1

vui ui

• Base URL：/team/
• PWA App Name：teamcheck
• package.json修改name為小寫

添加依賴

• element-ui
• axios
• moment
• lodash
• font-awesome

END