Help us understand the problem. What is going on with this article?

ASP.NET Core でSPAではなくVue.jsを利用してみる(1)

 クライアント側にVue.jsをSPA(シングルページアプリケーション)ではない方法で利用することについて記述していきます。

 SPAを利用するには、ES2015(ES6)の利用がほぼ必須となり、そこで現実的に利用するためにはIE11のサポートが必要になるのですが、その場合「webpack」や「babel」などの利用がほぼ必須です。残念ながらこれらの機能はRazorPageでは利用できない(利用できるかもしれませんが恐ろしく手間がかかりそう)と思われます。しかしながら、クライアントの環境を標準の「JQuery」と「BootStrap」で書くのも今どき…。
 「React」や「Angular」ならテンプレートが有りVisualStudioでも簡単にSPAで作成できそうですが(CLIを使えばVue.jsのテンプレートも利用できるようですね)、できればRazorPageを使うほうがいいんじゃないかなと思っていて「Vue.js」ならそれも可能な感じなので挑戦してみます。CSSフレームワークはblumaを使ってみます。

全体

 ・Vue.jsとblumaの設定(本稿)
 ・cssをblumaに変更
 ・バリデーションの変更
 ・Vue.jsでのコンポーネントの利用

-Vue.jsの設定-

環境

「ASp.Net Core でPostgreSQLを利用してIdentityで認証を使えるようにする」で作成した環境にVue.jsを組み込み、cssフレームワークをblumaに変更します。
- VisualStudio2019 Ver.16.2.3
- ASP.NET Core 2.2
- PostgreSQL 9.6 インストール済み、接続用のアカウント作成済み
- EntityFramework
- Vue.js 2.6.10
- bluma 0.7.5

Vue.jsとblumaの組み込み

 まずはNuGetを使ってVue.js2.6.10をインストールしてください。
 cssフレームワークはダウンロードして「webroot」の「css」フォルダに「bluma.css」をコピーしてください。
 次に、「/Pages/Shared/_Layout.cshtml」のJqueryとBootStarpをすべて消して、さらにRegistの部分も削っちゃいます。そしてVue.jsとbluma.cssをとりこむようにします。

_Layout.cshtml
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"] - WebApplication1</title>

    <environment include="Development">
        <link rel="stylesheet" href="~/css/bulma.css">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.js"></script>
    </environment>
    <environment exclude="Development">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.1.2/css/bulma.css">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.js" integrity="sha256-ufGElb3TnOtzl5E4c/qQnZFGP+FYEZj5kbSEdJNrw0A=" crossorigin="anonymous"></script>
    </environment>
    <link rel="stylesheet" href="~/css/site.css" />
</head>
<body>
    <header>
        <nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
            <div class="container">
                <a class="navbar-brand" asp-area="" asp-page="/Index">WebApplication1</a>
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-controls="navbarSupportedContent"
                        aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="navbar-collapse collapse d-sm-inline-flex flex-sm-row-reverse">
                    <partial name="_LoginPartial" />
                    <ul class="navbar-nav flex-grow-1">
                        <li class="nav-item">
                            <a class="nav-link text-dark" asp-area="" asp-page="/Index">Home</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link text-dark" asp-area="" asp-page="/Privacy">Privacy</a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
    </header>
    <div class="container">
        <partial name="_CookieConsentPartial" />
        <main role="main" class="pb-3">
            @RenderBody()
        </main>
    </div>

    <footer class="border-top footer text-muted">
        <div class="container">
            &copy; 2019 - WebApplication1 - <a asp-area="" asp-page="/Privacy">Privacy</a>
        </div>
    </footer>

    <script src="~/js/site.js" asp-append-version="true"></script>

    @RenderSection("Scripts", required: false)
</body>
</html>

「~/css/site.css」と「~/js/site.js」はのこしていますが、このあたりはすきにしてください。(「~/js/site.js」は空っぽだと思いますが)
 この状態でデバッガーで起動すると画面はえらいことになっています。

 次回はログイン画面を簡単にして、buma対応にしていきます。

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away