使用vue.js?為基礎(chǔ)的仿QQ聊天室
更新時(shí)間：2021年12月05日 15:57:49 作者：big-liu
這篇文章主要為大家介紹了基于vue.js的QQ聊天室，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助
簡介
這是一款基于 vue.js 開發(fā)的聊天室組件庫，在提供基礎(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)行二次開發(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)行開發(fā)，通過打包成js庫引入：
在 vue-mchat 目錄下執(zhí)行：
npm run lib
可獲得 lib 文件其中包含 MChat 的編譯文件庫，將 lib 整個(gè)復(fù)制到項(xiàng)目里，在 main.js 中引入:
import '../lib/MChat.css' import MChat from '../lib/MChat.umd' Vue.use(MChat)
總結(jié)
本篇文章就到這里了，希望能夠給你帶來幫助，也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容!
相關(guān)文章
這篇文章主要介紹了vue如何將字符串的一部分處理為html文檔并渲染到頁面，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-06-06
Vue3中Watch、Watcheffect、Computed的使用和區(qū)別解析
Watch、Watcheffect、Computed各有優(yōu)劣,選擇使用哪種方法取決于應(yīng)用場景和需求,watch?適合副作用操作,watchEffect適合簡單的自動(dòng)副作用管理,computed?適合聲明式的派生狀態(tài)計(jì)算,本文通過場景分析Vue3中Watch、Watcheffect、Computed的使用和區(qū)別,感興趣的朋友一起看看吧2024-07-07
在本文中小編給大家分享的是關(guān)于vue引入子組件方法和先關(guān)注意點(diǎn)，有需要的朋友們可以學(xué)習(xí)下。2019-02-02
模式是 Vue CLI 項(xiàng)目中一個(gè)重要的概念，下面這篇文章主要給大家介紹了關(guān)于Vue CLI中模式與環(huán)境變量的相關(guān)資料，需要的朋友可以參考下2021-05-05
大前端代碼重構(gòu)之事件攔截iOS?Flutter?Vue示例分析
這篇文章主要為大家介紹了大前端代碼重構(gòu)之事件攔截iOS?Flutter?Vue示例分析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-04-04
這篇文章主要介紹了Vue組件間通信方式全面匯總，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)吧2023-04-04
VUE3封裝一個(gè)Hook的實(shí)現(xiàn)示例
本文主要介紹了VUE3封裝一個(gè)Hook的實(shí)現(xiàn)示例,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2025-01-01
全局API并不在構(gòu)造器里,而是先聲明全局變量或者直接在Vue上定義一些新功能,Vue內(nèi)置了一些全局API,下面這篇文章主要給大家介紹了關(guān)于vue2源碼解析之全局API的相關(guān)資料,需要的朋友可以參考下2022-11-11
這篇文章主要介紹了vue?element如何添加遮罩層問題,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要介紹了Vue中的插件：Vuex。本文將圍繞它的優(yōu)缺點(diǎn)、使用場景和示例展開詳細(xì)的說明，感興趣的小伙伴可以跟隨小編一起了解一下2022-01-01