ASP.NET Core with Vue.js テンプレートをインストールする

ASP.NET Core で Vue テンプレートをインストールしてプロジェクトを作成するまでの手順です。

## 事前準備 .NET Core 2.0 以上が前提条件となるため、必要な場合は SDK や Runtime パッケージをダウンロードしてインストールします。 - [GitHub - dotnet/cli](https://github.com/dotnet/cli/) - [GitHub - dotnet/core](https://github.com/dotnet/core) インストールされている .NET Core のバージョンは CLI の次のオプションで確認できます。 ```cmd C:\>dotnet --version 2.1.200 C:\>dotnet --info .NET コマンド ライン ツール (2.1.200) Product Information: Version: 2.1.200 Commit SHA-1 hash: 2edba8d7f1 Runtime Environment: OS Name: Windows OS Version: 10.0.17134 OS Platform: Windows RID: win10-x64 Base Path: C:\Program Files\dotnet\sdk\2.1.200\ Microsoft .NET Core Shared Framework Host Version : 2.0.7 Build : 2d61d0b043915bc948ebf98836fefe9ba942be11 ``` ## テンプレートのインストール ASP.NET Core with Vue.js を含む SpaTemplate を CLI から NuGet からインストールします。 ```cmd dotnet new --install Microsoft.AspNetCore.SpaTemplates::* ``` - [NuGet - Microsoft.AspNetCore.SpaTemplates](https://www.nuget.org/packages/Microsoft.AspNetCore.SpaTemplates/) - [GitHub - aspnet/JavaScriptServices](https://github.com/aspnet/javascriptservices) インストール後、次のようにテンプレートが追加されていることを確認します。 ```cmd C:\>dotnet new -l 使用法: new [options] オプション: -h, --help このコマンドのヘルプを表示します。 -l, --list 指定された名前を含むテンプレートを一覧表示します。名前を指定しない場合は、すべてのテンプレートが一覧表示されます。 -n, --name 作成する出力の名前。名前を指定しない場合は、現在のディレクトリの名前が使用されます。 -o, --output 生成する出力を配置する場所。 -i, --install ソースまたはテンプレート パックをインストールします。 -u, --uninstall ソースまたはテンプレート パックをアンインストールします。 --type 使用可能な種類に基づいてテンプレートをフィルター処理します。定義済みの値は、"project"、"item"、"other" です。 --force 既存のファイルが変更されるとしても、強制的にコンテンツを生成します。 -lang, --language 作成するテンプレートの言語を指定します。 テンプレート 短い名前 言語 タグ -------------------------------------------------------------------------------------------------------- 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 xUnit Test Project xunit [C#], F#, VB Test/xUnit 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 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 Razor Page page Web/ASP.NET MVC ViewImports viewimports Web/ASP.NET MVC ViewStart viewstart Web/ASP.NET ``` ## プロジェクトの作成 追加したテンプレートを使用してプロジェクトを作成します。 ```cmd C:\>mkdir "projectDirectory" C:\>cd "projectDirectory" C:\projectDirectory>dotnet new vue ```