使用vue.js 为基础的仿QQ聊天室

目录
  • 简介
    • 下面是效果演示图：
    • MChat组件效果图：
    • IChat组件效果图：
    • 如何安装
      • 使用 npm 安装
    • 使用
      • 在main.js中引入
    • 如何进行二次开发
      • 方案一：
      • 方案二：
  • 总结

简介

这是一款基于 vue.js 开发的聊天室组件库，在提供基础封装的同时，最大程度的增加扩展性。

下面是效果演示图：

MChat组件效果图：

IChat组件效果图：

如何安装

使用 npm 安装

npm install vue-mchat

使用

在main.js中引入

# npm 下载方式
// 进入css
import 'MChat/lib/MChat.css'
//引入组件
import MChat from 'MChat'
// 使用vue加载组件
Vue.use(MChat)
#

如何进行二次开发

方案一：

直接将 pacages 文件夹复制到你需要的项目，在 main.js 中引入 vue-mchat:

import App from './App.vue'
import MChat from '../packages/index'

Vue.use(MChat)

方案二：

在 vue-mchat 的基础上进行开发，通过打包成js库引入：

在 vue-mchat 目录下执行：

npm run lib

可获得 lib 文件其中包含 MChat 的编译文件库，将 lib 整个复制到项目里，在 main.js 中引入:

import  '../lib/MChat.css'
import MChat from '../lib/MChat.umd'

Vue.use(MChat)

总结

本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注我们的更多内容!

赞 (0)

相关推荐

  • js编写简单的聊天室功能

    这个聊天室写的特别简易,比较适合刚开始学习js的同学借鉴,当然,写的不好,也希望诸位大神可以进行批评改正. 聊天室要求: 1.不能发空消息 2.敏感字***显示 3.图片替换 开心,尴尬 4.显示聊天内容和时间 5.每发一条信息,随机显示名称,先把一些名称定义到array里面 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> &

  • Node.js+express+socket实现在线实时多人聊天室

    Node.js+express+socket实现在线实时多人聊天室

    本文实例为大家分享了Node.js+express+socket实现在线实时多人聊天室的具体代码,供大家参考,具体内容如下 文件结构如下: 前端部分: 登录页面Login部分: login.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="

  • js代码实现多人聊天室

    本文实例为大家分享了js代码实现多人聊天室的具体代码,供大家参考,具体内容如下 设计要求: 1)用户应通过注册登录聊天室 2)聊天室可以显示所有在线用户 3)在每一条聊天内容之前,显示发出这条聊天内容的用户名. 4)可进行私密聊天. 5)当用户进入和离开聊天室时,系统会在聊天室里广播 config.js 代码如下 module.exports={ "port":3000, "host":"127.0.0.1" } broadcast.js 代码如

  • Node.js websocket使用socket.io库实现实时聊天室

    Node.js websocket使用socket.io库实现实时聊天室

    认识websocket WebSocket protocol 是HTML5一种新的协议.它实现了浏览器与服务器全双工通信(full-duple).一开始的握手需要借助HTTP请求完成. 其实websocket 并不是很依赖Http协议,它也拥有自己的一套协议机制,但在这里我们需要利用的socket.io 需要依赖到http . 之前用java jsp写过一个聊天,其实实现逻辑并不难,只是大部分时间都用在UI的设计上,其实现原理就是一个基于websocket的通信,要想做一个好的聊天室,我觉得大部

  • java仿QQ微信聊天室功能的实现

    java仿QQ微信聊天室功能的实现

    话不多说,先上图                                   即时通信系统:可以完成群聊.私人聊天,实时发送和显示聊天信息,完成好友列表,进一步可以带表情,附件发送,聊天信息的传送,等 系统的主要技术socket通信技术,多线程技术,数据库技术. 本系统实现的功能有:1.用户名字登录 2.用户之间的群聊和查看群聊记录3.用户之间的私聊和私聊记录4.动态刷新并显示好友列表5.显示在线人数 6.服务器可以显示用户在线状态 7.能够退出处理. 该程序可以实现局域网的聊天,只要把

  • 玩转NODE.JS（四）-搭建简单的聊天室的代码

    Nodejs好久没有跟进了,最近想用它搞一个聊天室,然后便偶遇了socket.io这个东东,说是可以用它来简单的实现实时双向的基于事件的通讯机制.我便看了一些个教程使用它来搭建一个超级简单的聊天室. 初始化项目 在电脑里新建一个文件夹,叫做"chatroom",然后使用npm进行初始化: $ npm init 然后根据提示以及相关信息一步一步输入,当然也可以一路回车下去,之后会在项目里生成一个package.json文件,里面的信息如下: $ cat package.json { &q

  • Node.js制作简单聊天室

    Node.js制作简单聊天室

    看了TCP的有关知识,写了个基于NET的聊天室. var net = require('net'); var count = 0, users = {}; var server = net.createServer(function (conn) { console.log('连接到'); conn.write( "\r\n > welcome to node-chat!" + "\r\n > " + count + " other peopl

  • 使用vue.js 为基础的仿QQ聊天室

    使用vue.js 为基础的仿QQ聊天室

    目录 简介 下面是效果演示图: MChat组件效果图: IChat组件效果图: 如何安装 使用 npm 安装 使用 在main.js中引入 如何进行二次开发 方案一: 方案二: 总结 简介 这是一款基于 vue.js 开发的聊天室组件库,在提供基础封装的同时,最大程度的增加扩展性. 下面是效果演示图: MChat组件效果图: IChat组件效果图: 如何安装 使用 npm 安装 npm install vue-mchat 使用 在main.js中引入 # npm 下载方式 // 进入css im

  • Android仿QQ聊天撒花特效 很真实

    Android仿QQ聊天撒花特效 很真实

    先看看效果图吧 实现这样的效果,你要知道贝塞尔曲线,何谓贝塞尔曲线?先在这里打个问号 下面就直接写了 1.activity_main.xml <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent

  • JS实现的仿QQ空间图片弹出效果代码

    本文实例讲述了JS实现的仿QQ空间图片弹出效果代码.分享给大家供大家参考,具体如下: <script type="text/javascript"> function imageShow(which_click) { var image_path = which_click; //alert(image_path); var tag_top = Math.max(document.documentElement.scrollTop, document.body.scroll

  • Android使用贝塞尔曲线仿QQ聊天消息气泡拖拽效果

    本文实例为大家分享了Android仿QQ聊天消息气泡拖拽效果展示的具体代码,供大家参考,具体内容如下 先画圆,都会吧.代码如下: public class Bezier extends View { private final Paint mGesturePaint = new Paint(); private final Path mPath = new Path(); private float mX1 = 100, mY1 = 150; private float mX2 = 300, m

  • react native 仿微信聊天室实例代码

    一.前言 9月,又到开学的季节.为每个一直默默努力的自己点赞!最近都沉浸在react native原生app开发中,之前也有使用vue/react/angular等技术开发过聊天室项目,另外还使用RN技术做了个自定义模态弹窗rnPop组件. 一.项目简述 基于react+react-native+react-navigation+react-redux+react-native-swiper+rnPop等技术开发的仿微信原生App界面聊天室--RN_ChatRoom,实现了原生app启动页.As

  • JavaScript实现QQ聊天室功能

    JavaScript实现QQ聊天室功能

    本文实例为大家分享了JavaScript实现QQ聊天室的具体代码,供大家参考,具体内容如下 1. 任务要求 1)掌握基本过滤选择器: 2)掌握jQuery对象的click()方法: 3)掌握jQuery对象的css()方法: 4)掌握jQuery对象的addClass()方法: 5)如何获取指定元素的值? 6)如何设置元素的显示和隐藏? 7)如何设置元素的html代码? 2. 需求说明 制作显示如下图所示的QQ聊天页面.随机用户在文本框中输入文本后点击“发送”按钮,文本中的消息将显示在“聊天记录

  • C语言仿QQ聊天界面抖动功能

    C语言仿QQ聊天界面抖动功能

    本文实例为大家分享了C语言 QQ聊天界面抖动的具体代码,供大家参考,具体内容如下 图片中的窗口抖动功能大家应该都用过,今天给大家带来的就是用C来实现类似QQ窗口抖动的小练习,其实窗口的抖动的原理就是让它在不同的几个位置停顿一小下然后再来回移动,我们先来看代码,稍后再进行解释. #include <stdio.h> #include<Windows.h> int main(void) { int time = 60; //休眠的时间,为60毫秒 int distance = 10;

  • vue + socket.io实现一个简易聊天室示例代码

    vue + socket.io实现一个简易聊天室示例代码

    vue + vuex + elementUi + socket.io实现一个简易的在线聊天室,提高自己在对vue系列在项目中应用的深度.因为学会一个库或者框架容易,但要结合项目使用一个库或框架就不是那么容易了.功能虽然不多,但还是有收获.设计和实现思路较为拙劣,恳请各位道友指正. 可以达到的需求 能查看在线用户列表 能发送和接受消息 使用到的框架和库 socket.io做为实时通讯基础 vuex/vue:客户端Ui层使用 Element-ui:客户端Ui组件 类文件关系图 服务端: 客户端: 服

  • 基于Vue.js+Nuxt开发自定义弹出层组件

    今天给大家分享VPopup 基于Vue.js构建的轻量级移动端弹出框组件,详情如下所示: 一款融合了Vant.NutUI等热门Vue组件库中的Popup弹层.Dialog对话框.Toast提示框.ActionSheet动作面板框.Notify通知框等功能. 快速使用 在main.js中引入组件 // 引入弹窗Popup import Popup from './components/popup' Vue.use(Popup) 支持如下两种 组件式 及 函数式 调用插件. 组件式 <templat

随机推荐