vue.js 파일에 코드를 주석 처리하는 방법은 무엇입니까?

향후 참조를 위해 vue.js 파일에 주석을 삽입해야하지만 문서에서 어떻게 수행하는지 찾을 수 없습니다.

내가 시도 //, /**/, {{-- --}},와 {# #},하지만 그들 중 누구도 제대로 작동하지 않습니다.

라 라벨의 칼날을 사용하고 있습니다. 그래서 이것은 sample_file.vue:

<template>
    <div class="media">

        <like-button :post="post" v-if="post.likedByCurrentUser === false && "></like-button>  {{--I want to comment this but I get an error from the gulp watch: post.canBeLikedByCurrentUser === true--}}

        <div class="media-left">
            <a href="#">
                <img class="media-object" v-bind:src="post.user.avatar" v-bind:title="post.user.name + ' image from Gravatar'">
            </a>
        </div>
        <div class="media-body">
            <strong>{{ post.user.name }}</strong>
            <p>{{post.body}}</p>
            <p>{{post.likeCount}} {{ pluralize('like', post.likeCount) }}</p>
        </div>
    </div>
</template> 

누구든지 주석을 삽입하는 방법 및 / 또는 코드를 주석 처리하는 방법을 알고 있습니까?

<template>상황 에서 태그에 표준 HTML 주석을 사용하고 싶을 것 입니다. 그것들은 출력에서도 제거 될 것입니다.

<!-- Comment -->

Bill Criswell이 말했듯이 HTML 주석 구문을 사용할 수 있습니다.

<!-- Comment -->

그러나 템플릿 태그 외부에서도 작동합니다. comment.vue

<!-- Testing comments, this will work too. -->

<template>
    <!-- This will work too -->

    <div>
        <!-- Html Comments -->
        Hello There!
    </div>
</template>

<style><style>

<!-- Commenting here -->

<script>
    // Commenting only 1 line

    /**
      * Commenting multiple lines
      * Commenting multiple lines
      */
</script>

방금 테스트했습니다.

<template>
    {{ /* this is a comment */ }}
    <h1>Hello world</h1>
</template>

태그 안에 있으면 댓글을 달 수 없다는 것을 알았습니다.

<!-- make sure it is outside a tag -->

<autocomplete
<!-- you can't place the comment out in here -->
>
</autocomplete>

Vue Styleguidist에는 모범 사례가 포함되어 있으며 구성 요소에 주석을 추가하는 방법의 예를 보여줍니다. https://vue-styleguidist.github.io/docs/Documenting.html#code-comments

하지만 일반적으로 ...

에서 템플릿 또는 HTML 섹션 사용 HTML 주석

<!-- Comment -->

에서 스크립트 섹션 자바 스크립트 주석을 사용

// Comment
/* Comment */

에서 스타일 섹션 CSS를 사용 코멘트

/* comment */

프로젝트에 유용하다면 장식없이 템플릿 위에 일반 텍스트를 넣을 수 있습니다. 구성 요소를 렌더링 할 때 완전히 무시됩니다.

This is some documentation about this component
   - some
   - info
<template></template>
<script></script>
<style></style>

다음 팁은 코드 자체 에 주석을 다는 것이 아니라 개발 중에 코드 덩어리를 일시적으로 건너 뛸 수 있도록하는 것입니다.

주석에 열기 및 닫기 태그가 필요한 경우 파서가 태그를 일치시키는 방식이 불편할 수 있습니다. 예를 들어 다음

<!-- I want to comment this <!-- this --> and that --> 

출력 and that -->됩니다. 비슷하게 /* this will be commented /* and so will this */ but not this */.

내 해결책은 v-if="false"(일시적으로) 건너 뛰려는 블록을 지정하는 데 사용하는 것입니다.

<template>
<div>
    Hello
    <div v-if="false">
        Vue will not process whatever's in here.
    </div>
    World!
</div>
</template>

코드를 문서화하기 위해 적절한 주석 대신 사용해서는 안됩니다. 개발 중에 건너 뛰려는 블록을 더 많이 제어 할 수있는 편리한 방법입니다.

나는 Vue.js에서 멍청하지만 //코드가 어쨌든 자바 스크립트이기 때문에 작동해야합니다. 문서에서이 예제를 찾습니다 . javascript의 처음 두 줄을 보면 //.

자바 스크립트 링크 파일의 예 :

// Full spec-compliant TodoMVC with localStorage persistence
// and hash-based routing in ~120 effective lines of JavaScript.

...