Vue 2 앱에 댓글 추가하기
이것은 FastComments의 공식 Vue 2 라이브러리입니다.
Vue 2 앱에 실시간 댓글, 채팅 및 리뷰 위젯을 삽입하세요.
저장소
실시간 데모 
퍼블릭 demo 테넌트에 대해 로컬에서 실행 중인 모든 위젯과 플로우를 보려면, 리포지토리를 클론하고 다음을 실행하세요:
npm install
npm run serve개별 데모는 dev/ 아래에 자체 진입점(npm run serve-collab-chat, serve-live-chat, serve-image-chat, serve-pagination, serve-toggle-dark-mode)도 있습니다.
설치
NPM
npm install --save fastcomments-vueYarn
yarn add fastcomments-vue사용법
댓글 위젯
FastCommentsVue 컴포넌트에는 라이브 FastComments 댓글 위젯이 포함되어 있습니다.
아래의 "demo"를 귀하의 "tenantId"로 바꾸세요 - FastComments 관리자 영역의 here에서 확인할 수 있습니다.
이 위젯은 많은 옵션을 지원합니다 - FastCommentsConfig는 here에서 확인하세요.
<script lang="ts">
import Vue from 'vue';
import FastCommentsVue from 'fastcomments-vue';
export default Vue.extend({
name: 'ServeDev',
components: {
FastCommentsVue
}
});
</script>
<template>
<div id="app">
<fast-comments-vue v-bind:config="{tenantId: 'demo'}" />
</div>
</template>현재 페이지 업데이트 (SPA 예제)
FastComments에서는 댓글이 연결되는 기사 ID 또는 페이지를 URL ID라고 합니다. 이는 URL이거나 ID일 수 있습니다. URL ID는 다음과 같이 정의합니다. 컴포넌트는 config 객체의 변화를 감시하여 리로드하므로, "url"과 "urlId" 설정만 업데이트하면 됩니다.
전체 작동 예제는 여기에서 확인하세요.
페이지네이션 예제를 다음 명령으로 실행하세요:
npm run serve-pagination<fast-comments-vue v-bind:config="{tenantId: 'demo', url: 'https://example.com', urlId: 'some-page-id'}" />계정 지역 (주의: EU 고객)
계정이 EU에 있는 경우 위젯 구성에서 region = 'eu'로 설정하세요. 예를 들면:
<fast-comments-vue v-bind:config="{tenantId: 'demo', url: 'https://example.com', urlId: 'some-page-id', region: 'eu'}" />그렇지 않으면 region을 정의할 필요가 없습니다.
프로덕션 환경에서
아마 콜백 등을 전달하는 경우 config을 인라인으로 정의하지 않는 것이 좋습니다. 대신, 당신은
config을 computed 블록에 정의하는 편이 좋습니다. 그렇지 않으면 콜백 등이 호출될 때마다 위젯 전체가 다시 렌더링됩니다.
유지보수 상태
이 컴포넌트들은 저희의 핵심 VanillaJS 컴포넌트들을 감싸는 래퍼입니다. 이 라이브러리를 배포하지 않고도 이러한 컴포넌트들을 자동으로 업데이트(버그 수정, 기능 추가)할 수 있으므로, 당분간 배포되지 않는다고 해서 FastComments가 활발히 개발되고 있지 않다는 뜻은 아닙니다! 업데이트는 저희 블로그에서 확인하세요. 중대한 API 변경이나 기능은 이 라이브러리에서 버전 업 없이 기본 코어 라이브러리에 절대 반영되지 않습니다.
도움이 필요하신가요?
Vue 2 라이브러리와 관련하여 문제가 발생하거나 질문이 있으시면, 다음을 이용해 주세요:
기여하기
기여를 환영합니다! 기여 지침은 GitHub 저장소를 방문해 주세요.