소개

지난번은 F#에서 ASP.NET Core MVC + ElectronNET 프로젝트를 구축하는 HOW TO를 소개했습니다.

이번에는 계속해서 위의 환경에 플러스 Vue.js를 도입하는 방법을 소개합니다.

궁극적으로 Quasar Framework을 사용하는 곳까지 소개 할 수 있다고 생각합니다.

사전 준비

프로젝트 준비

앞서 언급했듯이,이 기사는 지난번의 연속이므로 시도하고 싶다면 이전 기사를 참조하여 프로젝트를 구축하십시오.

🚨중요🚨
또한이 내용은 ElectronNET.API와 직접 관련이 없으므로 일반 ASP.NET Core MVC 환경에서도 문제가 없으며 프로그래밍 언어가 C# 인 경우에도 마찬가지이므로 F#에 갇힐 필요가 없습니다.

LibMan 소개

먼저 Vue.js 클라이언트 측 라이브러리를 관리하기위한 도구를 소개합니다.

Visual Studio에서 개발하는 동안에는 명령 줄에서 실행할 기회가 없으므로 문제가되지 않습니다.

다음 코드를 실행하면 쉽게 배포 할 수 있습니다.

powershell

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

라이브러리 도입·이용 방법

Vue.js 소개

ASP.NET Core를 사용하여 LibMan를 설치하십시오.
Vue.js에서는 ASP.NET Core MVC에 클라이언트 측 라이브러리 관계를 저장하는 것이 일반적이므로 이번에 따라 wwwroot/lib를 설치합니다.

설치 방법은 매우 간단하며 다음 명령을 실행하기 만하면됩니다.

powershell

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

실제로 다음과 같은 화면에서 실행됩니다.
실행중인 경로는 프로젝트 파일이있는 폴더입니다.



이 작업을 수행하면 처음에는 다음 화면과 같이 Vue.js를 수행하는 방법을 묻는 메시지가 표시되므로 아무 것도 입력하지 않고 Enter 키를 누릅니다.



그러면 설치가 시작되므로 완료 될 때까지 기다립니다.
다음과 같은 메시지가 나오면 무사한 설치 종료입니다.

Vue.js 사용

Vue.js 포함

먼저 설치된 DefaultProvider를 사용할 수 있도록 포함합니다.
Vue.js에 다음과 유사한 행을 삽입하십시오.

_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>
<!-- <中略> -->

위에서 설명한대로 개발 버전에서는 Views/Shared/_Layout.cshtml를 사용하고 릴리스 버전에서는 vue.js를 사용합니다.
실제 vue.min.js는 다음과 같습니다.

Vue.js 기능 사용

이제 Vue.js 공식 GET STARTED을 참조하여 구현해 보겠습니다.

이번에는 TOP 페이지 Visual Studio Code에서 Views/Home/Index.cshtml의 기능을 사용해 보겠습니다.
Vue.js에서 다음과 같이 수정하십시오.

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>
}
<!-- ↑↑↑ ここまで挿入 ↑↑↑ -->

실제 Views/Home/Index.cshtml는 다음과 같습니다.

실제로 작동

이제 실제로 작동하고 정상적으로 움직이는지 살펴 보겠습니다.
다음 명령으로 실행하십시오.

powershell

dotnet run

실제로 실행하면 다음과 같은 메시지가 출력된다고 생각하므로,
Ctrl 키를 누른 상태에서 링크를 클릭하십시오.



그러면 브라우저가 일어난다고 생각하기 때문에, 이하의 부분에 Visual Studio Code 가 출력되고 있으면 성공입니다!

결론

이상은 간단하지만 Hello, Vue입니다.

눈치 채울 수 있지만,이 방법으로 ASP.NET Core MVC で Vue.js を使うためのHOW TO도 도입 할 수 있습니다.

걱정되는 라이브러리가있는 분은이 방법으로 사용해보십시오.