ASP.NET Core MVCでもVue.jsを使うためのHOW TO

はじめに

前回 は 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 で開発環境を構築しているので導入がほぼ必須となっています.

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

powershell

dotnet tool install -g Microsoft.Web.LibraryManager.Cli

---

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

Vue.js を導入する

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

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

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

powershell

libman install vue -d .\wwwroot\lib\vue

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

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

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

Vue.js を利用する

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

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

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

_Layout.cshtml

<!-- <中略> -->
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>

<!-- ↓↓↓ ここから挿入 ↓↓↓ -->
<environment include="Development">
    <script src="~/lib/vue/vue.js"></script>
</environment>
<environment exclude="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 に以下のような修正をします.

Index.cshtml

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

<div class="text-center">
    <h1 class="display-4">Welcome!</h1>
    <p>Learn about <a href="https://docs.microsoft.com/aspnet/core">building Web apps with ASP.NET Core</a>.</p>
    <!-- ↓↓↓ ここから挿入 ↓↓↓ -->
    <div id="app">
        {{ message }}
    </div>
    <!-- ↑↑↑ ここまで挿入 ↑↑↑ -->
</div>

<!-- ↓↓↓ ここから挿入 ↓↓↓ -->
@section scripts {
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                message: 'Hello Vue!'
            }
        });
    </script>
}
<!-- ↑↑↑ ここまで挿入 ↑↑↑ -->

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

実際に動作させる

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

powershell

dotnet run

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

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

---

おわりに

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

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

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