はじめに
久々に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