소개

오랜만에 ASP.NET을 만질 기회가 있었기 때문에 드디어 .NET Core에서 SPA 템플릿을 사용하여 움직이는 곳까지 해 보았습니다.

환경

Windows 10 Pro

.NET Core SDK 2.1 설치됨

npm 설치됨

Windows에서 시도하고 있지만 macOS에서도 .NET Core SDK를 설치하면 비슷한 것을 할 수 있다고 생각합니다.

사용 가능한 SPA 템플릿 확인

표준으로 설치된 템플릿을 확인합니다.

# バージョン確認
dotnet --version
2.1.502

dotnet new -l
テンプレート                                            短い名前               言語                タグ
----------------------------------------------------------------------------------------------------------------------------
Console Application                               console            [C#], F#, VB      Common/Console
Class library                                     classlib           [C#], F#, VB      Common/Library
Unit Test Project                                 mstest             [C#], F#, VB      Test/MSTest
NUnit 3 Test Project                              nunit              [C#], F#, VB      Test/NUnit
NUnit 3 Test Item                                 nunit-test         [C#], F#, VB      Test/NUnit
xUnit Test Project                                xunit              [C#], F#, VB      Test/xUnit
Razor Page                                        page               [C#]              Web/ASP.NET
MVC ViewImports                                   viewimports        [C#]              Web/ASP.NET
MVC ViewStart                                     viewstart          [C#]              Web/ASP.NET
ASP.NET Core Empty                                web                [C#], F#          Web/Empty
ASP.NET Core Web App (Model-View-Controller)      mvc                [C#], F#          Web/MVC
ASP.NET Core Web App                              razor              [C#]              Web/MVC/Razor Pages
ASP.NET Core with Angular                         angular            [C#]              Web/MVC/SPA
ASP.NET Core with React.js                        react              [C#]              Web/MVC/SPA
ASP.NET Core with React.js and Redux              reactredux         [C#]              Web/MVC/SPA
Razor Class Library                               razorclasslib      [C#]              Web/Razor/Library/Razor Class Library
ASP.NET Core Web API                              webapi             [C#], F#          Web/WebAPI
global.json file                                  globaljson                           Config
NuGet Config                                      nugetconfig                          Config
Web Config                                        webconfig                            Config
Solution File                                     sln                                  Solution

이번에는 Vue를 사용하고 싶으므로 템플릿을 설치합니다.

SPA 템플릿 설치

다음 명령을 실행합니다.ASP.NET Core with Vue.js가 설치되어 있는지 확인합니다.

dotnet new --install Microsoft.AspNetCore.SpaTemplates::*

テンプレート                                            短い名前               言語                タグ
----------------------------------------------------------------------------------------------------------------------------
Console Application                               console            [C#], F#, VB      Common/Console
Class library                                     classlib           [C#], F#, VB      Common/Library
Unit Test Project                                 mstest             [C#], F#, VB      Test/MSTest
NUnit 3 Test Project                              nunit              [C#], F#, VB      Test/NUnit
NUnit 3 Test Item                                 nunit-test         [C#], F#, VB      Test/NUnit
xUnit Test Project                                xunit              [C#], F#, VB      Test/xUnit
Razor Page                                        page               [C#]              Web/ASP.NET
MVC ViewImports                                   viewimports        [C#]              Web/ASP.NET
MVC ViewStart                                     viewstart          [C#]              Web/ASP.NET
ASP.NET Core Empty                                web                [C#], F#          Web/Empty
ASP.NET Core Web App (Model-View-Controller)      mvc                [C#], F#          Web/MVC
ASP.NET Core Web App                              razor              [C#]              Web/MVC/Razor Pages
ASP.NET Core with Aurelia                         aurelia            [C#]              Web/MVC/SPA
ASP.NET Core with Knockout.js                     knockout           [C#]              Web/MVC/SPA
ASP.NET Core with Vue.js                          vue                [C#]              Web/MVC/SPA
ASP.NET Core with Angular                         angular            [C#]              Web/MVC/SPA
ASP.NET Core with React.js                        react              [C#]              Web/MVC/SPA
ASP.NET Core with React.js and Redux              reactredux         [C#]              Web/MVC/SPA
Razor Class Library                               razorclasslib      [C#]              Web/Razor/Library/Razor Class Library
ASP.NET Core Web API                              webapi             [C#], F#          Web/WebAPI
global.json file                                  globaljson                           Config
NuGet Config                                      nugetconfig                          Config
Web Config                                        webconfig                            Config
Solution File                                     sln                                  Solution

새 프로젝트 만들기

모든 디렉토리에서 .NET Core CLI를 사용하여 Vue의 새 프로젝트를 만듭니다.

dotnet new vue
テンプレート "ASP.NET Core with Vue.js" が正常に作成されました。

作成後のアクションを処理しています...
'dotnet restore' を C:\Users\xxxxx\LocalProjects\test-vue\test-vue.csproj で実行しています...


正常に復元されました。

説明:

-------------------------------------------------------------------
IMPORTANT: Before running this project on the command line,
           you must restore NPM packages by running "npm install"
-------------------------------------------------------------------

手動の操作手順: Run "npm install"

NuGet 패키지의 복원까지는 해주는 것 같기 때문에, npm 패키지의 복원을 실시합니다.

npm i

애플리케이션 실행

이것만으로 나머지는 실행할 뿐입니다.

dotnet run
Hosting environment: Production
Content root path: C:\Users\xxxxx\LocalProjects\test-vue
Now listening on: http://localhost:5000
Application started. Press Ctrl+C to shut down.
Application is shutting down...

http://localhost:5000 를 브라우저에서 열어 페이지를 확인합니다.



이제 ASP.NET Core 프로젝트의 vue.js 템플릿을 사용하여 환경을 만들 수있었습니다.

참고

Use JavaScriptServices to Create Single Page Applications in ASP.NET Core