基于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找到它们。 所有变量都有默认值。

代码结构 (Code structure)

1. assets

   资产

   • Sass standard CSS code structure
     Sass标准CSS代码结构
   • partials directorypartials目录
   • modules directorymodules目录中的变量和设置

2. components

   组件

   • basic-vue-chat directorybasic-vue-chat目录的子目录中

3. helpers

   帮手

   • reusable helpers for scrolling functionalities
     可重用的滚动功能助手

4. App.vue - runner file

   App.vue-运行文件

5. main.js - project config

   main.js-项目配置

使用的技术 (Technologies used)

1. JavaScript

   JavaScript

   • Vue
     Vue
   • Moment.js
     Moment.js

2. HTML5

   HTML5

3. CSS

   CSS

   • SCSS
     SCSS
   • BEM
     边界元

4. Tests

   测验

   • Jest
     笑话
   • Vue test utils
     Vue测试工具

5. Tooling

   工装

   • npm
     npm

6. Continuous Integration

   持续集成

   • Travis CI
     特拉维斯CI

7. 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/

基于vue前端聊天插件