使用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)

总结

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

您可能感兴趣的文章:

vue如何将字符串的一部分处理为html文档并渲染到页面
这篇文章主要介绍了vue如何将字符串的一部分处理为html文档并渲染到页面，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-06-06
Vue3中Watch、Watcheffect、Computed的使用和区别解析
Watch、Watcheffect、Computed各有优劣,选择使用哪种方法取决于应用场景和需求,watch 适合副作用操作,watchEffect适合简单的自动副作用管理,computed 适合声明式的派生状态计算,本文通过场景分析Vue3中Watch、Watcheffect、Computed的使用和区别,感兴趣的朋友一起看看吧
2024-07-07
详解vue引入子组件方法
在本文中小编给大家分享的是关于vue引入子组件方法和先关注意点，有需要的朋友们可以学习下。
2019-02-02
Vue CLI中模式与环境变量的深入详解
模式是 Vue CLI 项目中一个重要的概念，下面这篇文章主要给大家介绍了关于Vue CLI中模式与环境变量的相关资料，需要的朋友可以参考下
2021-05-05
大前端代码重构之事件拦截iOS Flutter Vue示例分析
这篇文章主要为大家介绍了大前端代码重构之事件拦截iOS Flutter Vue示例分析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-04-04
Vue组件间通信方式全面汇总介绍
这篇文章主要介绍了Vue组件间通信方式全面汇总，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习吧
2023-04-04
VUE3封装一个Hook的实现示例
本文主要介绍了VUE3封装一个Hook的实现示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
2025-01-01
vue2源码解析之全局API实例详解
全局API并不在构造器里,而是先声明全局变量或者直接在Vue上定义一些新功能,Vue内置了一些全局API,下面这篇文章主要给大家介绍了关于vue2源码解析之全局API的相关资料,需要的朋友可以参考下
2022-11-11
vue element如何添加遮罩层
这篇文章主要介绍了vue element如何添加遮罩层问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-03-03
Vue学习之Vuex的使用详解
这篇文章主要介绍了Vue中的插件：Vuex。本文将围绕它的优缺点、使用场景和示例展开详细的说明，感兴趣的小伙伴可以跟随小编一起了解一下
2022-01-01