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