basic vue chat 다운로드 - basic vue chat 소스 코드 다운로드

basic vue chat

AI 소스 코드

1.0.0

다운로드

기본 vue-chat 로고

기본 vue-chat

VUE 기반 채팅 구현.

기본 vue-chat
- 설치
  - NPM
  - 방사
  - 저장소 사용
- 의존성
- 용법
  - 푸시 메시지
  - 사용자로부터 메시지 처리
  - 이미지
  - 명령
  - 모의 데이터
- 사용자 정의
  - 스타일
  - 제목
  - 초기 데이터
  - 스타일링
- 코드 구조
- 사용 된 기술

설치

NPM 또는 원사와 같은 패키지 관리자를 사용하여 구성 요소를 설치하거나 저장소에서 구성 요소를 설치할 수 있습니다.

NPM

npm i basic-vue-chat

방사

yarn add basic-vue-chat

저장소 사용

git clone https://github.com/jmaczan/basic-vue-chat.git
cd basic-vue-chat
npm i

의존성

구성 요소는 vue ( vue 패키지), fontawesome 및 moment.js for vue ( vue-moment )를 사용합니다.

용법

채팅은 단일 VUE 구성 요소로 /src/components/basic-vue-chat/ 에서 찾을 수 있습니다. 시작하려면 BASICVUECHAT 구성 요소를 가져 와서 다음 줄을 HTML 코드에 넣습니다.

 < basic-vue-chat />

푸시 메시지

채팅에 메시지를 푸기 위해 NewMessage Prop을 BasicVueChat에 전달하십시오 . 예:

 < basic-vue-chat :new-message =" message " />

위의 message 객체는 VUE 구성 요소의 data 의 일부일 수 있습니다.

올바른 메시지 구조의 예 :

 {
  id : 0 ,
  author : 'Person' ,
  imageUrl : 'http://path/to/image' ,
  image : '' ,
  contents : 'hi there' ,
  date : '16:30'
}

App.vue 파일에서 푸시하는 메시지의 예를 찾을 수 있습니다.

사용자로부터 메시지 처리

사용자가 메시지를 보내면 메시지가 BasicVueChat 구성 요소로 전파되고 이벤트 NewOwnMessage가 방출됩니다 . 이 이벤트를 처리하려면 예를 들어 다음을 수행 할 수 있습니다.

 < basic-vue-chat @newOwnMessage =" onNewOwnMessage " />

여기서 onNewOwnMessage(message) 는 VUE 구성 요소의 메소드입니다.

올바른 이벤트 페이로드 구조의 예 :

 {
  id : 1 ,
  imageUrl : 'http://path/to/image' ,
  image : File ( ) ,
  contents : 'hello' ,
  date : '16:31'
}

이미지

이미지를 업로드하고받을 수 있습니다. 이미지를 첨부하려면 종이 클립 버튼을 사용하십시오. 이미지는 image ( File 개체) 및 imageUrl (Path string ) 속성의 메시지에서 방출됩니다.

명령

개발을 시작하려면 핫 재 장전 모드를 사용할 수 있습니다.

 npm run serve

생산 버전을 구축하려면 :

 npm run build

테스트 실행 :

 npm test

모의 데이터

모의 데이터를 첨부하려면 Logic Prop attachMock BasicVueChat에 전달하십시오.

사용자 정의

스타일

스타일은 기본 BasicVueChat 구성 요소로 가져오고 변수는 !default 기본값을 가지고 있으므로 스타일 가져 오기 전에 자신의 변수를 정의하여 기본값을 재정의 할 수 있음을 의미합니다.

< style lang="scss">
$primary : red ;
// above the following import you can override default values of variables like $primary 
@import " ../../assets/scss/main.scss " ;
</ style >

제목

기본 VueChat 구성 요소에 소품 title 전달하십시오.

 < basic-vue-chat :title =" 'My Best Team' " />

초기 데이터

Prop initialFeed BASICVUECHAT 구성 요소로 전달하십시오.

 < basic-vue-chat :initial-feed =" feed " />

올바른 데이터 구조의 예 :

 const feed = [
  {
    id : 1 ,
    author : 'Person' ,
    imageUrl : 'http://path/to/image' ,
    contents : 'hi there' ,
    date : '16:30'
  } ,
  {
    id : 0 ,
    author : 'Me' ,
    contents : 'hello' ,
    date : '16:30'
  }
]

현재 사용자의 ID를 정의하기 위해 Prop initialAuthorId BasicVueChat 구성 요소로 전달하십시오. 기본값은 0 입니다.

스타일링

채팅은 SCSS를 사용하므로 프로젝트에 사용되는 변수를 쉽게 대체 할 수 있습니다. /src/assets/scss/modules/_variables.scss 에서 찾을 수 있습니다. 모든 변수에는 기본값이 있습니다.

설명	변하기 쉬운	기본값
원색	$ 1 차	$ 슬레이트 블루 (#6b63d8)
보조 색상	$ 2 차	$ lavender (#b284ed)
헤더 색상	$ 헤더 컬러	$ Ghost-White (#faf9ff)
입력 배경색	$ 입력-백 그라운드 컬러	$ alice-blue (#f2efff)
글꼴 가족	$ font-family	'Source Sans Pro', Sans-Serif
글꼴 무게	$ font-weight	400
글꼴 크기	$ font 사이즈	14px
어두운 텍스트 색상	$ 다크 텍스트 컬러	$ Madison (#2C3E50)
가벼운 텍스트 색상	$ Light-Text-Color	$ Ghost-White (#faf9ff)
어두운 배경색	$ Dark-BG	$ Madison (#2C3E50)
가벼운 배경색	$ light-bg	$ white (#ffffff)
채팅 창 너비	$ window-width	500px
채팅 창 높이	$ 창 높이	400px
메시지 최대 너비	$ Message-Max-Width	200px