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

總結

本篇文章就到這裡瞭,希望能夠給你帶來幫助,也希望您能夠多多關註WalkonNet的更多內容!

推薦閱讀: