ASP.NET MVCでは、JavaScriptライブラリとしてKnockout.jsが付属していた時期が続きました。

時間の経過っともに、Knockout自体はメンテナンスされているものの、大幅なバージョンアップはされないような感じになっています。
その背景から、モダンなJavaScriptライブラリとの親和性が無かったりと、なかなか使いづらくなってきました。
そこで、最近のメジャーなスタックを使って改修できないかといろいろと検討していたところ、Vue.jsが良さげということなので、ASP.NET MVCプロジェクトに導入する方法をまとめました。

Nugetでインストール

当然ながらはじめは、Nugetでインストールを試みました。（この段階でちょっと不安ありましたが）
Visual Studioのパッケージマネージャーから検索し、まずは本体をインストール。

次に型定義ファイルもインストールします。(もはやピュアなJavaScriptでの開発は出来ない体なのです)
残念ながらバージョンが古すぎる。メンテナンスがされていないようです。

と、Nugetでのパッケージ管理を諦めることになりました。

npmでインストール

であれば、Vue.jsの更新サイトにあるように普通にnpmパッケージでライブラリを管理を試してみました。
Visual Studio上では標準でnpmをサポートしていないようです。(bowerはあるのに)

そのため、拡張機能で検索すると、「Package Installer」なる機能がありました。
ダウンロード数もまずまずです。

インストール方法

プロジェクトを右クリックし「Quick install Package」を選択
管理パッケージでnpmを選択し、インストールしたいパッケージ名を入力後、バージョンを選択

無事、インストールできました。
また、自動でpacakge.jsonも作成され、MVCプロジェクトの管理対象となります。
インストールされるnode_modules配下はプロジェクト管理対象外となっています。

npmで管理されてるVue.jsはデフォルトで型定義ファイルをサポートしているので、これで問題解決です。

再インストール

pacakge.jsonを右クリックし「パッケージの復元」を選択すると、再インストールできます。

今後クラシックなASP.NET MVCであってもクライアントライブラリはnpm管理が良さそーです。
これで、やりたいこと全部できましたが、今後はタスクランナーとかでwebpackとかと連動させて見ようと思います。

次回は、Vue.JS周りの記事を書いていこうと思います。