使用vue.js?為基礎(chǔ)的仿QQ聊天室
更新時(shí)間：2021年12月05日 15:57:49 作者：big-liu
這篇文章主要為大家介紹了基于vue.js的QQ聊天室，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助
簡(jiǎn)介
這是一款基于 vue.js 開(kāi)發(fā)的聊天室組件庫(kù)，在提供基礎(chǔ)封裝的同時(shí)，最大程度的增加擴(kuò)展性。
下面是效果演示圖：
MChat組件效果圖：
IChat組件效果圖：
如何安裝
使用 npm 安裝
npm install vue-mchat
使用
在main.js中引入
# npm 下載方式 // 進(jìn)入css import 'MChat/lib/MChat.css' //引入組件 import MChat from 'MChat' // 使用vue加載組件 Vue.use(MChat) #
如何進(jìn)行二次開(kāi)發(fā)
方案一：
直接將 pacages 文件夾復(fù)制到你需要的項(xiàng)目，在 main.js 中引入 vue-mchat:
import App from './App.vue' import MChat from '../packages/index' Vue.use(MChat)
方案二：
在 vue-mchat 的基礎(chǔ)上進(jìn)行開(kāi)發(fā)，通過(guò)打包成js庫(kù)引入：
在 vue-mchat 目錄下執(zhí)行：
npm run lib
可獲得 lib 文件其中包含 MChat 的編譯文件庫(kù)，將 lib 整個(gè)復(fù)制到項(xiàng)目里，在 main.js 中引入:
import '../lib/MChat.css' import MChat from '../lib/MChat.umd' Vue.use(MChat)
總結(jié)
本篇文章就到這里了，希望能夠給你帶來(lái)幫助，也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容!
相關(guān)文章
公共Hooks封裝useTableData表格數(shù)據(jù)實(shí)例
這篇文章主要為大家介紹了公共Hooks封裝useTableData表格數(shù)據(jù)實(shí)例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-12-12
微信小程序?qū)崙?zhàn)基于vue2實(shí)現(xiàn)瀑布流的代碼實(shí)例
瀑布流，又稱(chēng)瀑布流式布局，是比較流行的一種網(wǎng)站頁(yè)面布局，視覺(jué)表現(xiàn)為參差不齊的多欄布局，隨著頁(yè)面滾動(dòng)條向下滾動(dòng)，這種布局還會(huì)不斷加載數(shù)據(jù)塊并附加至當(dāng)前尾部，這篇文章主要介紹了微信小程序?qū)崙?zhàn)，基于vue2實(shí)現(xiàn)瀑布流,需要的朋友可以參考下2022-12-12
VUE跨域問(wèn)題Access to XMLHttpRequest at
今天發(fā)現(xiàn)一個(gè)錯(cuò)誤，VUE發(fā)送請(qǐng)求的時(shí)候不能請(qǐng)求到正確數(shù)據(jù)，VUE跨域問(wèn)題Access to XMLHttpRequest at，本文就詳細(xì)的來(lái)介紹一下解決方法，感興趣的可以了解一下2022-05-05
本篇文章主要介紹了Vue組件開(kāi)發(fā)初探，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-02-02
vue左右側(cè)聯(lián)動(dòng)滾動(dòng)的實(shí)現(xiàn)代碼
這篇文章主要介紹了vue左右側(cè)聯(lián)動(dòng)滾動(dòng)的實(shí)現(xiàn)代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-06-06
使用 Vue-TCB 快速在 Vue 應(yīng)用中接入云開(kāi)發(fā)的方法
這篇文章主要介紹了如何使用 Vue-TCB 快速在 Vue 應(yīng)用中接入云開(kāi)發(fā),本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-02-02
Vue實(shí)現(xiàn)docx、pdf格式文件在線(xiàn)預(yù)覽功能
在業(yè)務(wù)中，如果遇到文檔管理類(lèi)的功能，會(huì)出現(xiàn)需要在線(xiàn)預(yù)覽的業(yè)務(wù)需求，本文主要是通過(guò)第三方庫(kù)來(lái)實(shí)現(xiàn)文檔預(yù)覽功能，并將其封裝成preview組件,感興趣的可以了解一下2022-09-09
vue如何實(shí)現(xiàn)Json格式數(shù)據(jù)展示
這篇文章主要介紹了vue如何實(shí)現(xiàn)Json格式數(shù)據(jù)展示，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
vue導(dǎo)出少量pdf文件實(shí)現(xiàn)示例詳解
這篇文章主要為大家介紹了vue導(dǎo)出少量pdf文件實(shí)現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-06-06
Vue3?Watch踩坑實(shí)戰(zhàn)之watch監(jiān)聽(tīng)無(wú)效
Vue.js中的watch選項(xiàng)用于監(jiān)聽(tīng)Vue實(shí)例上某個(gè)特定的數(shù)據(jù)變化,下面這篇文章主要給大家介紹了關(guān)于Vue3?Watch踩坑實(shí)戰(zhàn)之watch監(jiān)聽(tīng)無(wú)效的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-05-05