はじめに

前回は F#で ASP.NET Core MVC + ElectronNETのプロジェクトを構築する HOW TO を紹介しました.

今回はそれの続きで, 上記の環境にプラス Vue.jsを導入する方法を紹介します.

最終的に Quasar Frameworkを利用していくところまで紹介できればと思っていますが, とりあえず今回は Vue.jsの導入までにしておきます.

事前準備

プロジェクトを用意する

前述したとおり, 今回の記事は 前回の続きとなっているので, もし試したい場合は前回の記事を参考にプロジェクトを構築してください.

🚨重要🚨
また, 今回の内容は ElectronNET.API とは直接関係ないので, 普通の ASP.NET Core MVC の環境でも問題ありませんし, プログラミング言語が C# の場合でも同様ですので F# に囚われる必要もありません.

LibMan を導入する

まずは, ASP.NET Coreのクライアントサイドのライブラリを管理するためのツールを導入します.

Visual Studio で開発している分にはコマンドラインで実行する機会がないので問題になりませんが, 今回は Visual Studio Code で開発環境を構築しているので導入がほぼ必須となっています.

以下のコードを実行することで, 簡単に導入することができます.

dotnettoolinstall-gMicrosoft.Web.LibraryManager.Cli

ライブラリ導入・利用方法

Vue.js を導入する

LibManを利用して Vue.jsをインストールします.

ASP.NET Core MVCでは wwwroot/libにクライアントサイドのライブラリ関係を保存するのが一般的なので, 今回もそれに倣って Vue.jsをインストールします.

インストール方法は非常に簡単で, 以下のコマンドを実行するだけです.

libmaninstallvue-d.\wwwroot\lib\vue

実際には以下のような画面で実行しています.
実行しているパスはプロジェクトファイルがあるフォルダとなっています.

実行をすると, 初回は以下の画面のように DefaultProviderをどうするか尋ねられるので, 何も入力しないで Enterを押下します.

そうするとインストールが開始されるので完了までしばし待機します.
以下のようなメッセージが出てくれば, 無事インストール終了です.

Vue.js を利用する

Vue.js をインクルードする

まずは, インストールした Vue.jsを利用できるようにするためにインクルードします.

Views/Shared/_Layout.cshtmlに次のような行を挿入します.

<!-- <中略> --><script src="~/lib/jquery/dist/jquery.min.js"></script><script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script><!-- ↓↓↓ ここから挿入 ↓↓↓ --><environmentinclude="Development"><script src="~/lib/vue/vue.js"></script></environment><environmentexclude="Development"><script src="~/lib/vue/vue.min.js"></script></environment><!-- ↑↑↑ ここまで挿入 ↑↑↑ --><script src="~/js/site.js"asp-append-version="true"></script><!-- <中略> -->

上記のようにすることで, 開発版では vue.jsを, リリース版では vue.min.jsを利用するようになります.
実際の Visual Studio Code上では以下のようになっています.

Vue.js の機能を使う

それでは Vue.js 公式の GET STARTEDを参考に実装してみます.

今回はTOPページである Views/Home/Index.cshtmlで Vue.jsの機能を利用してみます.

Views/Home/Index.cshtmlに以下のような修正をします.

@{
    ViewData["Title"] = "Home Page";
}

<divclass="text-center"><h1class="display-4">Welcome!</h1><p>Learn about <ahref="https://docs.microsoft.com/aspnet/core">building Web apps with ASP.NET Core</a>.</p><!-- ↓↓↓ ここから挿入 ↓↓↓ --><divid="app">
        {{ message }}
    </div><!-- ↑↑↑ ここまで挿入 ↑↑↑ --></div><!-- ↓↓↓ ここから挿入 ↓↓↓ -->
@section scripts {
    <script>constapp=newVue({el:'#app',data:{message:'Hello Vue!'}});</script>
}
<!-- ↑↑↑ ここまで挿入 ↑↑↑ -->

実際の Visual Studio Code上では以下のようになっています.

実際に動作させる

それでは実際に動作させてみて正常に動くか見てみましょう.
以下のコマンドで実行します.

dotnetrun

実際に実行すると, 以下のようなメッセージが出力されてくると思うので,
Ctrlキーを押しながら, リンクをクリックします.

そうするとブラウザが立ち上がると思うので, 以下の箇所に Hello, Vueが出力されていれば成功です！

おわりに

以上が簡単ですが ASP.NET Core MVC で Vue.js を使うためのHOW TOとなります.

お気付きかもしれませんが, 今回の方法で Vue.js 以外のライブラリも導入することが可能です.

気になるライブラリがある方はこの方法で利用してみてください.