やっぱりASP.NET CoreでもJavaScriptフレームワークを使ってSPAをしたいということで、公式ドキュメントにSPAをやるためのページが用意されています。
docs.microsoft.com
ただしこのページで取り上げているJSフレームワークは、AngularJSとReactです。
基本はバックエンドエンジニアな私としては、AngularJSとReactは難しいため、Vue.jsを好んで使っています。
しかしASP.NET CoreでVue.jsを使うための手順がドキュメントにないため、下記のリポジトリを参考にしました。
github.com
と思ったが一通り試してみると、もうこのリポジトリの手順ではうまくいかなかったので、下記の方法でやるとよいです。
SPAテンプレートのインストール
こちらのページにあるコマンドを実行することで、SPAのためのテンプレートがインストールされます。
docs.microsoft.com
PS E:\src\vueapp> dotnet new --install Microsoft.DotNet.Web.Spa.ProjectTemplates::2.0.0-preview1-final
Restoring packages for C:\Users\tsubaki\.templateengine\dotnetcli\v2.1.3\scratch\restore.csproj...
Installing Microsoft.DotNet.Web.Spa.ProjectTemplates 2.0.0-preview1-final.
Generating MSBuild file C:\Users\tsubaki\.templateengine\dotnetcli\v2.1.3\scratch\obj\restore.csproj.nuget.g.props.
Generating MSBuild file C:\Users\tsubaki\.templateengine\dotnetcli\v2.1.3\scratch\obj\restore.csproj.nuget.g.targets.
Restore completed in 371.04 ms for C:\Users\tsubaki\.templateengine\dotnetcli\v2.1.3\scratch\restore.csproj.
テンプレート 短い名前 言語 タグ
--------------------------------------------------------------------------------------------------------
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 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
Examples:
dotnet new mvc --auth Individual
dotnet new xunit
dotnet new --help
コマンドの出力にあるように、AngularJSやReactはコマンドが用意されていますが、Vue.jsはありません。
プロジェクトで使用するSDKのバージョンを指定する
結論から言うと、.NET Core SDK 2.0.xでなければVue.jsのテンプレートを利用することができません。
そのためglobal.json
というファイルを作成し、SDKのバージョンを指定する必要があります。
{
"sdk": {
"version": "2.0.3"
}
}
.NET Core SDKの2.0系の最新は2.0.3
になります。
github.com
global.jsonについてはこちらのページに説明があります。
docs.microsoft.com
テンプレートの種類を確認する
2.0系のSDKを指定したうえで、再度作成できるテンプレートの種類を確認します。
PS E:\src\vueapp> 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 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 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 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
するとVue.jsのテンプレートも表示され、使えるようになりました。
ASP.NET Core with Vue.jsのプロジェクトを作成する
あとはいつものようにdotnet new
コマンドでプロジェクトを作ればよいです。
PS E:\src\vueapp> dotnet new vue
テンプレート "ASP.NET Core with Vue.js" が正常に作成されました。
作成後のアクションを処理しています...
'dotnet restore' を E:\src\vueapp\vueapp.csproj で実行しています...
Restoring packages for E:\src\vueapp\vueapp.csproj...
Restore completed in 46.83 ms for E:\src\vueapp\vueapp.csproj.
Generating MSBuild file E:\src\vueapp\obj\vueapp.csproj.nuget.g.props.
Generating MSBuild file E:\src\vueapp\obj\vueapp.csproj.nuget.g.targets.
Restore completed in 1.43 sec for E:\src\vueapp\vueapp.csproj.
正常に復元されました。
説明:
-------------------------------------------------------------------
IMPORTANT: Before running this project on the command line,
you must restore NPM packages by running "npm install"
-------------------------------------------------------------------
手動の操作手順: Run "npm install"
実行してみる
プロジェクトを作成した段階で簡単なアプリケーションとなっており、実行するとサンプルを確認することができます。
npm install
dotnet run
これでVue.jsを使ったASP.NET Coreのプロジェクトを作成することができました。