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

更新时间：2021年12月05日 15:57:49 作者：big-liu

这篇文章主要为大家介绍了基于vue.js的QQ聊天室，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助

简介

这是一款基于 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)

总结

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

您可能感兴趣的文章:

公共Hooks封装useTableData表格数据实例
这篇文章主要为大家介绍了公共Hooks封装useTableData表格数据实例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-12-12
微信小程序实战基于vue2实现瀑布流的代码实例
瀑布流，又称瀑布流式布局，是比较流行的一种网站页面布局，视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部，这篇文章主要介绍了微信小程序实战，基于vue2实现瀑布流,需要的朋友可以参考下
2022-12-12
VUE跨域问题Access to XMLHttpRequest at
今天发现一个错误，VUE发送请求的时候不能请求到正确数据，VUE跨域问题Access to XMLHttpRequest at，本文就详细的来介绍一下解决方法，感兴趣的可以了解一下
2022-05-05
Vue组件开发初探
本篇文章主要介绍了Vue组件开发初探，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-02-02
vue左右侧联动滚动的实现代码
这篇文章主要介绍了vue左右侧联动滚动的实现代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-06-06
使用 Vue-TCB 快速在 Vue 应用中接入云开发的方法
这篇文章主要介绍了如何使用 Vue-TCB 快速在 Vue 应用中接入云开发,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
2020-02-02
Vue实现docx、pdf格式文件在线预览功能
在业务中，如果遇到文档管理类的功能，会出现需要在线预览的业务需求，本文主要是通过第三方库来实现文档预览功能，并将其封装成preview组件,感兴趣的可以了解一下
2022-09-09
vue如何实现Json格式数据展示
这篇文章主要介绍了vue如何实现Json格式数据展示，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-04-04
vue导出少量pdf文件实现示例详解
这篇文章主要为大家介绍了vue导出少量pdf文件实现示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-06-06
Vue3 Watch踩坑实战之watch监听无效
Vue.js中的watch选项用于监听Vue实例上某个特定的数据变化,下面这篇文章主要给大家介绍了关于Vue3 Watch踩坑实战之watch监听无效的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2023-05-05