當前位置：首頁 > 前端技术 > vue >内容正文

vue

基于vue前端聊天插件_基于Vue聊天的实现

發布時間：2024/3/13 vue 37 豆豆

生活随笔收集整理的這篇文章主要介紹了基于vue前端聊天插件_基于Vue聊天的实现小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

基于vue前端聊天插件

基本視頻聊天 (basic-vue-chat)

Easy to use VueJS chat.

易于使用的VueJS聊天。

安裝 (Installation)

You can install the component using package managers, such as npm or yarn or install component from the repository.

您可以使用軟件包管理器(例如npm或yarn)來安裝組件，也可以從存儲庫中安裝組件。

npm (npm)

npm i basic-vue-chat

紗 (yarn)

yarn add basic-vue-chat

使用倉庫 (using repository)

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

用法 (Usage)

Chat is a single Vue component, which you can find in /src/components/basic-vue-chat/. To start, just import BasicVueChat component and put the following line into your html code:

聊天是單個Vue組件，您可以在/src/components/basic-vue-chat/ 。首先，只需導入BasicVueChat組件并將以下行放入您的html代碼中：

<basic-vue-chat />

依存關系 (Dependencies)

Components uses only two dependencies - Vue (vue package)and Moment.js for Vue (vue-moment).

組件僅使用兩個依賴項-Vue( vue程序包)和Moment.js(用于Vue)( vue-moment )。

推送消息 (Pushing messages)

To push message to chat, just pass newMessage prop to BasicVueChat. Example:

要推送消息以聊天，只需將newMessage屬性傳遞給BasicVueChat即可 。例：

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

The message object above may be part of data in your Vue component in which you will use BasicVueChat.

上面的message對象可能是您將在其中使用BasicVueChat的Vue組件中data一部分。

Example of correct message structure:

正確的消息結構示例：

{id: 0,author: 'Person',contents: 'hi there',date: '16:30' }

You can find example of message pushing in App.vue file.

您可以在App.vue文件中找到消息推送的App.vue 。

處理來自用戶的消息 (Handling messages from user)

When user sends message, the message is propagated to BasicVueChat component and event newOwnMessage is emitted. To handle this event, you can for example do this:

當用戶發送消息時， 該消息將傳播到BasicVueChat組件，并發出 newOwnMessage 事件。要處理此事件，您可以例如執行以下操作：

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

where onNewOwnMessage(message) is a method in your Vue component in which you will use BasicVueChat.

其中onNewOwnMessage(message)是Vue組件中的一種方法，您將在其中使用BasicVueChat。

Example of correct event payload structure:

正確的事件有效負載結構示例：

{id: 1,contents: 'hello',date: '16:31' }

To start development, you can use hot reload mode:

要開始開發，可以使用熱重載模式：

npm run serve

To build production version:

要構建生產版本：

npm run build

To run tests:

要運行測試：

npm test

For demo purposes, there's a Push message button, which pushes another person's mock message to chat.

出于演示目的，有一個“ Push message按鈕，可將其他人的模擬消息推送到聊天室。

模擬數據 (Mock data)

To attach mock data, just pass logic prop attachMock to BasicVueChat.

要附加模擬數據，只需將邏輯道具attachMock傳遞給BasicVueChat。

客制化 (Customization)

標題 (Title)

Pass prop title to BasicVueChat component.

將prop title傳遞給BasicVueChat組件。

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

初始數據 (Initial data)

Pass prop initialFeed to BasicVueChat component.

將prop initialFeed傳遞給BasicVueChat組件。

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

Example of correct data structure:

正確的數據結構示例：

const feed = [{id: 0,author: 'Person',contents: 'hi there',date: '16:30'},{id: 1,author: 'Me',contents: 'hello',date: '16:30'} ]

造型 (Styling)

Chat uses SCSS, so you can easily override variables used in project. You can find them in /src/assets/scss/modules/_variables.scss. All variables have default values.

聊天使用SCSS，因此您可以輕松覆蓋項目中使用的變量。您可以在/src/assets/scss/modules/_variables.scss找到它們。所有變量都有默認值。

DescriptionVariableDefault value

Primary color	$primary	$slate-blue (#6B63D8)
Secondary color	$secondary	$lavender (#B284ED)
Header color	$header-color	$ghost-white (#FAF9FF)
Input background color	$input-background-color	$alice-blue (#F2EFFF)
Font family	$font-family	'Source Sans Pro', sans-serif
Font weight	$font-weight	400
Font size	$font-size	14px
Dark text color	$dark-text-color	$madison (#2C3E50)
Light text color	$light-text-color	$ghost-white (#FAF9FF)
Dark background color	$dark-bg	$madison (#2C3E50)
Light background color	$light-bg	$white (#FFFFFF)
Chat window width	$window-width	500px
Chat window height	$window-height	400px
Message max width	$message-max-width	200px

描述變量默認值

原色	$ primary	$ slate-blue(＃6B63D8)
二次色	$ secondary	$薰衣草(＃B284ED)
標題顏色	$ header-color	$ ghost-white(＃FAF9FF)
輸入背景色	$ input-background-color	$ alice-blue(＃F2EFFF)
字體系列	$ font-family	“無源Source”，無襯線
字型粗細	$ font-weight	400
字體大小	$ font-size	14像素
深色文字	$深色文本顏色	$麥迪遜(＃2C3E50)
淺文字顏色	$ light-text-color	$ ghost-white(＃FAF9FF)
深色背景色	$ dark-bg	$麥迪遜(＃2C3E50)
淺背景色	$ light-bg	$白色(#FFFFFF)
聊天窗口寬度	$窗口寬度	500像素
聊天窗口高度	$窗口高度	400像素
郵件最大寬度	$ message-max-width	200像素

代碼結構 (Code structure)

assets

資產

Sass standard CSS code structure
Sass標準CSS代碼結構
partials directorypartials目錄
modules directorymodules目錄中的變量和設置

components

組件

basic-vue-chat directorybasic-vue-chat目錄的子目錄中

helpers

幫手

reusable helpers for scrolling functionalities
可重用的滾動功能助手

App.vue - runner file

App.vue-運行文件

main.js - project config

main.js-項目配置

使用的技術 (Technologies used)

JavaScript

Vue
Vue
Moment.js
Moment.js

HTML5

CSS

SCSS
SCSS
BEM
邊界元

Tests

測驗

Jest
笑話
Vue test utils
Vue測試工具

Tooling

工裝

npm
npm

Continuous Integration

持續集成

Travis CI
特拉維斯CI

Linting

林亭

ESLint standard config
ESLint標準配置

Developed and tested under macOS High Sierra 10.13 and Google Chrome 69.

在macOS High Sierra 10.13和Google Chrome 69下開發和測試。

翻譯自: https://vuejsexamples.com/implementation-of-vue-based-chat/