ASP.NET Core のテンプレートで Vue をインストール

# はじめに

久々にASP.NETを触る機会があったので、ついでに.NET CoreでSPAテンプレートを使用して動かすところまでやってみました。

## 環境

* Windows 10 Pro
* .NET Core SDK 2.1 インストール済み
* npm インストール済み

Windowsで試していますがmacOSでも`.NET Core SDK`をインストールすれば同様のことができると思います。

## 使用可能なSPAテンプレートの確認

標準でインストールされているテンプレートを確認します。

```bash
# バージョン確認
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`がインストールされていることを確認します。

```bash
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
```

## アプリケーションの実行

これだけであとは実行するだけです。

```bash
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`をブラウザで開いてページを確認します。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/228453/48a8fcb1-3e11-165e-e542-6b1496ea4e35.png)

以上でASP.NET Core プロジェクトのvue.jsテンプレートを使った環境を作ることができました。

## 参考

[Use JavaScriptServices to Create Single Page Applications in ASP.NET Core](https://docs.microsoft.com/en-us/aspnet/core/client-side/spa-services?view=aspnetcore-2.2#creating-a-new-project)