asp.net - 왜 Razor Pages와 VueJs를 섞는 것이 나쁜 것입니까?




asp.net-mvc asp.net-core (2)

당신은 이것을 할 수 있습니다. 우리처럼 기존 코드 기반을 마이그레이션하고 모든 것을 한꺼번에 변환 할 수없는 경우 가끔 있습니다. Ron C가 말했듯이, 그것은 잘 작동합니다.

새로운 프로젝트를 시작한다면 선택의 폭이 넓어집니다. SPA와 면도기를 선호하는 이유는 ...

  • 반동. SPA 앱은 일반적으로 반응이 훨씬 큽니다. 초기 렌더링은 데이터가 도착하기 전에 캐시에서 제공되는 경우가 많습니다. 첫 번째로드에서는 모든 리소스가 하나의 요청 - 응답으로 번들에 도착합니다. 요청 체인이 없거나 훨씬 적습니다.

  • 워크 플로우. Webpack, 번들링 및 핫 리로드가 좋습니다. 미니 빌드, Vue 렌더 함수 컴파일, 404 스타일 오류 제거, js 구문 오류가 발생하여 프로덕션 빌드가 생성됩니다. 많은 오류가 발생하면 오류를 발견하고 발견하는주기가 크게 줄어 듭니다.

  • 스파 우주. 라우팅, Vuex, 이것은 정말로 미래의 길입니다.

  • 청정. 면도기와 Vue는 하루가 끝나면 비슷한 일을합니다. 혼합하면 머리를 똑바로 유지하는 데 어려움을 겪을 수 있습니다.

Razor Pages를 사용하여 .NET 코어 프로젝트를 설정하고 모든 논리에 대해 면도 페이지 안에 vueJs를 포함하려고합니다.

이 같은:

@{
    ViewData["Title"] = "VueJs With Razor";
}
<h2>@ViewData["Title"].</h2>

<div id="app">
   <span>{{ message }}</span>
</div>

<script>
     new Vue({
        el: '#app',
        data: {
          message : 'Hello vue.js'
        }
    })
</script>

나는 Vue and Razor 페이지를 혼합하는 것은 나쁜 습관이며, Razor 또는 Vue를 사용해야한다는 것을 읽었습니다.

왜 이런거야?


VueJs와 면도기를 섞는 것은 반드시 나쁜 것은 아니지만, 좋을 수도 있습니다!

나는 SPA가 아닌 페이지를 위해 면도기로 Vue를 사용하고 두 개는 잘 작동합니다. Vue를 CDN의 스크립트 태그를 통해로드하여 사용하고 transpiling에 WebPack을 사용하지 않기 때문에 코드를 ESP5에 작성합니다. 나는이 접근법을 다음과 같은 이유로 선택했다.

  • SPA보다는 Razor 페이지를 사용하면 SEO 및 공개 대상 페이지의 검색 엔진 순위에 도움이됩니다.
  • CDN에서 직접 Vue를로드하면 학습 곡선에서 Webpack 중심 기술의 전체 스택을 제거 할 수 있으므로 새 개발자가 시스템에서 더 빨리 작업 할 수 있습니다.
  • 이 접근법은 여전히 ​​Vue가 본질적으로 테이블에 가져 오는 UI 개발에 대한 반응적인 장점을 제공합니다.
  • "페이지 모델"을 유지하면 사이트 기능을 제공하는 코드가 해당 기능을 제공하는 백엔드 페이지 주위에 논리적으로 그룹화됩니다.

Vue와 Razor는 많은 것들을 할 수 있기 때문에 공개적으로 마주 보는 페이지의 목표는 Razor를 사용하여 가능한 한 최종 HTML에 근접하게 생성하고 Vue를 사용하여 페이지에 반응성을 추가하는 것입니다. 이렇게하면 반환 된 HTML을 구문 분석하여 페이지의 색인을 생성하는 크롤러에 큰 SEO 혜택을 제공합니다.

Vue의 사용법이 SPA 및 WebPack의 경로를 사용하는 것과 상당히 다르다는 것을 알고 있습니다.이 접근법은 코드 재 작업없이 타사 Vue 구성 요소를 사용할 수 없다는 것을 의미합니다. 그러나이 접근법은 소프트웨어 아키텍처를 단순화하고 경량의 반응 형 UI를 제공합니다.

이 접근법을 사용하면 Razor를 사용하여 vue 속성이 포함 된 일부 태그로 HTML의 초기 렌더링을 생성 할 수 있습니다. 그런 다음 브라우저에서 페이지가로드 된 후 Vue가 처리하고 원하는 방식으로 해당 페이지를 재구성 할 수 있습니다.

분명히,이 접근법은 모든 개발자 나 프로젝트의 필요에 맞지 않을 것입니다. 그러나 일부 유스 케이스에서는 꽤 좋은 설정입니다.

관심있는 사람들을위한 몇 가지 세부 정보

sitewide를 사용하기 때문에 내 _layout.aspx 파일은 vue를 인스턴스화합니다. 이 수준에서 vue에 구현 된 모든 sitewide 기능이 구현됩니다. 대부분의 페이지에는 페이지 별 vue 기능이 있습니다. 이는 해당 페이지의 mixin 또는 해당 페이지에서로드 된 js 파일의 mixin으로 구현됩니다. _layout.aspx 페이지가 Vue를 인스턴스화 할 때 전역 믹스 배열에 등록한 모든 믹스 인을 사용합니다. (이 페이지는 mixin 배열에 밀어 넣었습니다)

.vue 파일을 사용하지 않습니다. 필요한 모든 구성 요소는 페이지에 직접 구현되거나 여러 페이지에서 사용해야하는 경우 아래와 같은 부분 뷰로 구현됩니다.

dlogViewComponent.cshtml :

    @* dlog vue component template*@
    <script type="text/x-template" id="dlogTemplate">
        <div class="dlog" v-show="dlog.visible" v-on:click="dlog.closeBoxVisible ? close() : ''">
            <div class="dlogCell">
                <div class="dlogFrame" @@click.stop="" style="max-width:400px">
                    <i class="icon icon-close-thin-custom dlogCloseIcon" v-if="dlog.closeBoxVisible" @@click="close()"></i>
                    <div class="dlogCloseIconSpace" v-if="dlog.closeBoxVisible"></div>
                    <div class="dlogInner">
                        <div class="dlogTitle" style="float:left" v-text="title"></div>
                        <div class="clear"></div>
                        <div class="dlogContent">
                            <slot></slot>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </script>

    @* Vue dlog component *@
    <script type="text/javascript">
            Vue.component('dlog', {
                template: '#dlogTemplate',
                props: {    //don't mutate these!
                    closeBoxVisible: true,
                    title: 'One'
                },
                data: function () {
                    return {
                        dlog: { //nest the data props below dlog so I can use same names as cooresponding prop
                            closeBoxVisible: (typeof this.closeBoxVisible === 'undefined') ? true : (this.closeBoxVisible == 'true'),
                            title: (typeof this.title === 'undefined') ? '' : this.title,
                            visible: false
                        }
                    }
                },
                methods: {
                    //opens the dialog
                    open: function () {
                        app.hideBusy();        //just in case, no harm if not busy
                        this.dlog.visible = true;
                        var identifyingClass = this.getIdentifyingClass();
                        Vue.nextTick(function () {
                            $("." + identifyingClass).addClass("animateIn");
                            fx.manageDlogOnly();
                        });
                    },
                    //closes the dialog
                    close: function () {
                        fx.prepDlogClose();
                        var identifyingClass = this.getIdentifyingClass();
                        this.dlog.visible = false;
                        $("." + identifyingClass).removeClass("animateIn");
                    },
                    getIdentifyingClass: function () {
                        if (this.$el.classList.length > 1) {
                            //the last class is always our identifying css class.
                            return this.$el.classList[this.$el.classList.length - 1];
                        } else {
                            throw "A dialog must have an identifying class assigned to it.";
                        }
                    }

                }
            });
    </script>

위의 Vue.component ( 'dlog', ... 구성 요소를 설치하고 페이지에서 사용할 수 있도록하는 j의 일부입니다.

_layout.cshtml 페이지의 vue 코드는 아래 코드와 같습니다. 전체 사이트에서 사용되는 _layout.cshtml에서 Vue를 인스턴스화하면 Vue가 사이트 전체의 단일 위치에서만 인스턴스화됩니다.

_layout.cshtml :

 <script type="text/javascript">
    var app = new Vue({
        el: '#appTemplate',
        mixins: mixinArray,                     //The page adds it's mixin to mixinArray before this part of the layout executes. 
        data: {
            errorMsg: ''                        //used sitewide for error messages
            //other data used sitewide
        }, 
        methods: {
            //methods that need to be available in vue sitewide, examples below:
            showBusy: function (html) {
                //functionality to show the user that the site is busy with an ajax request.
            },
            hideBusy: function () {
                //functionality to hide the busy spinner and messaging
            }
        },
        created: function () {
             //this method is particularly useful for initializing data.
        }
    });

</script>

관심이 충분하다면 블로그 게시물로 좀 더 자세히 접근 할 수 있지만 필자가 여기서 제공 한 내용은이 비 전통적인 접근 방식에 대한 아주 명확한 그림을 그리는 것입니다.





vue.js