はじめに

久々に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