.NET Core + Vue.js 프로젝트 구축하기

.NET Core + Vue.js 프로젝트 구축 순서

1. npm설치

• Windows의경우
  • 설치파일다운로드후 설치
  • 설치후에 버전확인 npm --version
• Linux의경우 (ubuntu 18.04)

  $ sudo apt update             --Ubuntu Package를 갱신
  $ sudo apt install nodejs npm --nodejs、npm 설치
  $ node --version              --node버전확인
  $ npm --version　             --npm버전확인

2. Vue CLI설치  

• Window의 경우 npm install -g @vue/cli
  • 버전확인 vue --version
• Linux의 경우 sudo npm install -g @vue/cli
  • 버전확인 vue -h

3. ASP .NET Core 프로젝트 추가

• 신규프로젝트 등록화면에서 ASP .NET Core Web API를 선택합니다.

Visual Studio언어가 일본어이므로 일본어로 표시되는점 사과드립니다.

• 프로젝트명과 저장디렉토리를 선택 및 입력합니다.

Visual Studio언어가 일본어이므로 일본어로 표시되는점 사과드립니다.

• 프레임워크와 추가정보를 설정합니다.

Visual Studio언어가 일본어이므로 일본어로 표시되는점 사과드립니다.

4. Vue.js 프로젝트 추가

• Command Prompt에서 Vue 프로젝트를 생성합니다.

CD C:\Project\AttendanceManagement(ASP.NET Core의 디렉토리선택)
vue create client(Vue의프로젝트명)

5. Vue.js 프로젝트 파일 수정

• client(생성한 Vue의 프로젝트명)/package.json 파일을 수정합니다.

"scripts": {
  "watch": "vue-cli-service build --watch"
}

6. ASP .NET Core 프로젝트 파일 수정

• AttendanceManagement(ASP .NET Core 프로젝트).csproj

 <Project Sdk="Microsoft.NET.Sdk.Web">
  <PropertyGroup>
    <TargetFramework>netcoreapp3.1</TargetFramework>
    <!-- (Vue의 프로젝트명) -->
    <SpaRoot>client\</SpaRoot>
  </PropertyGroup>

  <ItemGroup>
    <!-- $(SpaRoot)\* 는 빌드할때 출력안함 -->
    <Content Remove="$(SpaRoot)**" />
  </ItemGroup>

  <!-- dotnet publish 실행시에 실행하는 부분 -->
  <Target Name="RunWebpack" AfterTargets="ComputeFilesToPublish">
    <!-- 실제환경의 경우 "npm run build" 을 실행함-->
    <Exec WorkingDirectory="$(SpaRoot)" Command="npm run build" />

    <ItemGroup>
      <!-- $(SpaRoot)dist\* 을 publish 실행시 복사됨 -->
      <DistFiles Include="$(SpaRoot)dist\**" />
      <ResolvedFileToPublish Include="@(DistFiles->'%(FullPath)')" Exclude="@(ResolvedFileToPublish)">
        <RelativePath>%(DistFiles.Identity)</RelativePath>
        <CopyToPublishDirectory>PreserveNewest</CopyToPublishDirectory>
      </ResolvedFileToPublish>
    </ItemGroup>
  </Target>
</Project>

7. NuGet중에서 필요한 Package설치

• NuGet패키지 관리에서 아래의 패키지를 설치합니다.

Install-Package Nyami.AspNetCore.VueCliServices

Visual Studio언어가 일본어이므로 일본어로 표시되는점 사과드립니다.

8. ASP .NET Core의 소스코드 수정

• Startup.cs의 소스코드를 수정합니다.

public void ConfigureServices(IServiceCollection services)
{
  // 이하의 소스코드 추가
  // x.RootPath = (Vue의프로젝트명)/dist
  services.AddSpaStaticFiles(x => { x.RootPath = "client/dist"; });
}

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
  // 이하의 소스코드 추가
  app.UseSpaStaticFiles();
  // spa.Options.SourcePath = (Vue의프로젝트명)
  app.UseSpa(spa => { spa.Options.SourcePath = "client"; });
}

Visual Studio언어가 일본어이므로 일본어로 표시되는점 사과드립니다.

9.  Vue.js 프로젝트 실행

• Command Prompt에서 이하의 명령어를 이용해서 Vue.js 프로젝트를 실행합니다.

dotnet watch run
cd client
npm run watch

# 실제환경
# set NODE_ENV=production
# dotnet run -c Release