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

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

事前準備

.NET Core 2.0 以上が前提条件となるため、必要な場合は SDK や Runtime パッケージをダウンロードしてインストールします。

インストールされている .NET Core のバージョンは CLI の次のオプションで確認できます。

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 からインストールします。

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

インストール後、次のようにテンプレートが追加されていることを確認します。

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

プロジェクトの作成

追加したテンプレートを使用してプロジェクトを作成します。

C:\>mkdir "projectDirectory"
C:\>cd "projectDirectory"
C:\projectDirectory>dotnet new 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 ```

MSyics.Blog

このブログを検索