著vue3.x越來(lái)越穩(wěn)定及vite2.0的快速迭代推出，加上很多大廠相繼推出了vue3的UI組件庫(kù)，在2021年必然受到開發(fā)者的再一次熱捧。

Vue3迭代更新頻繁，目前star高達(dá)20.2K+。

// 官網(wǎng)地址
https://v3.vuejs.org/

Vitejs目前的star達(dá)到15.7K+。

// 官網(wǎng)地址
https://vitejs.dev/

項(xiàng)目介紹

vue3-webchat 基于vue3.x+vuex4+vue-router4+element-plus+v3layer+v3scroll等技術(shù)架構(gòu)的仿微信PC端界面聊天實(shí)例。

以上是仿制微信界面聊天效果，同樣也支持QQ皮膚。

技術(shù)棧

• 使用技術(shù)：vue3.0+vuex4+vue-router4
• UI組件庫(kù)：element-plus（餓了么Vue3 pc端組件庫(kù)）
• 彈窗組件：V3Layer（基于Vue3自定義桌面端彈窗）
• 滾動(dòng)條組件：V3Scroll（基于Vue3自定義虛擬美化滾動(dòng)條）
• iconfont圖標(biāo)：阿里字體圖標(biāo)庫(kù)

Vue3.x自定義彈窗組件

大家看到的所有彈窗功能，均是自己開發(fā)的vue3.0自定義彈窗V3Layer組件。

前段時(shí)間有過一篇詳細(xì)的分享，這里就不作介紹了。感興趣的話可以去看看。

vue3.0系列：Vue3自定義PC端彈窗組件V3Layer

Vue3.x自定義美化滾動(dòng)條組件

為了使得項(xiàng)目效果一致，所有頁(yè)面的滾動(dòng)條均是采用vue3.0自定義組件實(shí)現(xiàn)。

v3scroll 一款輕量級(jí)的pc桌面端模擬滾動(dòng)條組件。支持是否原生滾動(dòng)條、自動(dòng)隱藏、滾動(dòng)條大小/層疊/顏色等功能。

大家感興趣的話，可以去看看這篇分享。

Vue3.0系列：vue3定制美化滾動(dòng)條組件v3scroll

vue.config.js項(xiàng)目配置

/**
 * Vue3.0項(xiàng)目配置
 */

const path = require('path')

module.exports = {
    // 基本路徑
    // publicPath: '/',

    // 輸出文件目錄
    // outputDir: 'dist',

    // assetsDir: '',

    // 環(huán)境配置
    devServer: {
        // host: 'localhost',
        // port: 8080,
        // 是否開啟https
        https: false,
        // 編譯完是否打開網(wǎng)頁(yè)
        open: false,
        
        // 代理配置
        // proxy: {
        //     '^/api': {
        //         target: '<url>',
        //         ws: true,
        //         changeOrigin: true
        //     },
        //     '^/foo': {
        //         target: '<other_url>'
        //     }
        // }
    },

    // webpack配置
    chainWebpack: config => {
        // 配置路徑別名
        config.resolve.alias
            .set('@', path.join(__dirname, 'src'))
            .set('@assets', path.join(__dirname, 'src/assets'))
            .set('@components', path.join(__dirname, 'src/components'))
            .set('@layouts', path.join(__dirname, 'src/layouts'))
            .set('@views', path.join(__dirname, 'src/views'))
    }
}

Vue3引入/注冊(cè)公共組件

// 引入餓了么ElementPlus組件庫(kù)
import ElementPlus from 'element-plus'
import 'element-plus/lib/theme-chalk/index.css'

// 引入vue3彈窗組件v3layer
import V3Layer from '../components/v3layer'

// 引入vue3滾動(dòng)條組件v3scroll
import V3Scroll from '@components/v3scroll'

// 引入公共組件
import WinBar from '../layouts/winbar.vue'
import SideBar from '../layouts/sidebar'
import Middle from '../layouts/middle'

import Utils from './utils'

const Plugins = app => {
    app.use(ElementPlus)
    app.use(V3Layer)
    app.use(V3Scroll)

    // 注冊(cè)公共組件
    app.component('WinBar', WinBar)
    app.component('SideBar', SideBar)
    app.component('Middle', Middle)

    app.provide('utils', Utils)
}

export default Plugins

項(xiàng)目中主面板毛玻璃效果(虛化背景)

<!-- //虛化背景（毛玻璃） -->
<div class="vui__bgblur">
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100%" class="blur-svg" viewBox="0 0 1920 875" preserveAspectRatio="none">
    <filter id="blur_mkvvpnf"><feGaussianBlur in="SourceGraphic" stdDeviation="50"></feGaussianBlur></filter>
    <image :xlink:href="store.state.skin" x="0" y="0" width="100%" height="100%" externalResourcesRequired="true" xmlns:xlink="http://www.w3.org/1999/xlink" style="filter:url(#blur_mkvvpnf)" preserveAspectRatio="none"></image>
    </svg>
    <div class="blur-cover"></div>
</div>

Vue3攔截登錄狀態(tài)

vue3.0中使用全局路由鉤子攔截登錄狀態(tài)。

router.beforeEach((to, from, next) => {
    const token = store.state.token

    // 判斷當(dāng)前路由地址是否需要登錄權(quán)限
    if(to.meta.requireAuth) {
        if(token) {
            next()
        }else {
            // 未登錄授權(quán)
            V3Layer({
                content: '還未登錄授權(quán)！', position: 'top', layerStyle: 'background:#fa5151', time: 2,
                onEnd: () => {
                    next({ path: '/login' })
                }
            })
        }
    }else {
        next()
    }
})

Vue3.x聊天模塊

如上圖：聊天編輯框部分支持文字+emoj表情、在光標(biāo)處插入表情、多行文本內(nèi)容。

編輯器抽離了一個(gè)公共的Editor.vue組件。

<template>
    <div
        ref="editorRef"
        class="editor"
        contentEditable="true"
        v-html="editorText"
        @click="handleClick"
        @input="handleInput"
        @focus="handleFocus"
        @blur="handleBlur"
        style="user-select:text;-webkit-user-select:text;">
    </div>
</template>

另外還支持粘貼截圖發(fā)送，通過監(jiān)聽paste事件，判斷是否是圖片類型，從而發(fā)送截圖。

editorRef.value.addEventListener('paste', function(e) {
    let cbd = e.clipboardData
    let ua = window.navigator.userAgent
    if(!(e.clipboardData && e.clipboardData.items)) return

    if(cbd.items && cbd.items.length === 2 && cbd.items[0].kind === "string" && cbd.items[1].kind === "file" &&
        cbd.types && cbd.types.length === 2 && cbd.types[0] === "text/plain" && cbd.types[1] === "Files" &&
        ua.match(/Macintosh/i) && Number(ua.match(/Chrome\/(\d{2})/i)[1]) < 49){
        return;
    }
    for(var i = 0; i < cbd.items.length; i++) {
        var item = cbd.items[i]
        // console.log(item)
        // console.log(item.kind)
        if(item.kind == 'file') {
            var blob = item.getAsFile()
            if(blob.size === 0) return
            // 讀取圖片記錄
            var reader = new FileReader()
            reader.readAsDataURL(blob)
            reader.onload = function() {
                var _img = this.result

                // 返回圖片給父組件
                emit('pasteFn', _img)
            }
        }
    }
})

還支持拖拽圖片至聊天區(qū)域進(jìn)行發(fā)送。

<div class="ntMain__cont" @dragenter="handleDragEnter" @dragover="handleDragOver" @drop="handleDrop">
    // ...
</div>

const handleDragEnter = (e) => {
    e.stopPropagation()
    e.preventDefault()
}
const handleDragOver = (e) => {
    e.stopPropagation()
    e.preventDefault()
}
const handleDrop = (e) => {
    e.stopPropagation()
    e.preventDefault()
    // console.log(e.dataTransfer)

    handleFileList(e.dataTransfer)
}
// 獲取拖拽文件列表
const handleFileList = (filelist) => {
    let files = filelist.files
    if(files.length >= 2) {
        v3layer.message({icon: 'error', content: '暫時(shí)支持拖拽一張圖片', shade: true, layerStyle: {background:'#ffefe6',color:'#ff3838'}})
        return false
    }
    for(let i = 0; i < files.length; i++) {
        if(files[i].type != '') {
            handleFileAdd(files[i])
        }else {
            v3layer.message({icon: 'error', content: '目前不支持文件夾拖拽功能', shade: true, layerStyle: {background:'#ffefe6',color:'#ff3838'}})
        }
    }
}

大家如果感興趣可以自己去試試哈。

ok，基于vue3+element-plus開發(fā)仿微信/QQ聊天實(shí)戰(zhàn)項(xiàng)目就分享到這里。

基于vue3.0+vant3移動(dòng)端聊天實(shí)戰(zhàn)|vue3聊天模板實(shí)例

vue2+vue-router+webpack+vuex+sass+svg構(gòu)圖+es6/7

git clone https://github.com/bailichen/vue-weixin.gitcd vue-weixin

├── README.md // webpack配置文件├── build // 項(xiàng)目打包路徑├── config // 上線項(xiàng)目文件，放在服務(wù)器即可正常訪問│ └── index.js├── favicon.ico├── index.html├── package.json├── printscreen

紹

基于vue2.x+vuex+vue-cli+vue-router+element-ui+swiper等技術(shù)開發(fā)仿微信pc端界面聊天應(yīng)用，實(shí)現(xiàn)了發(fā)送消息+表情(動(dòng)圖gif)、圖片/視頻預(yù)覽、右鍵長(zhǎng)按菜單、紅包/朋友圈、截圖發(fā)送等功能。

技術(shù)棧

• vue版本：Vue2.5.6
• 狀態(tài)管理：Vuex
• 頁(yè)面路由：Vue-router
• iconfont圖標(biāo)：阿里巴巴字體圖標(biāo)庫(kù)
• 自定義滾動(dòng)條：vue-gemini-scrollbar
• UI組件庫(kù)：element-ui（餓了么UI庫(kù)）
• 高德地圖：vue-amap
• 圖片預(yù)覽：vue-photo-preview

預(yù)覽演示

<script src="https://lf6-cdn-tos.bytescm.com/obj/cdn-static-resource/tt_player/tt.player.js?v=20160723"></script>

餓了么前端UI庫(kù)

Element | 是一套為開發(fā)者、設(shè)計(jì)師和產(chǎn)品經(jīng)理準(zhǔn)備的基于 Vue 2.0 的桌面端組件庫(kù)

https://element.eleme.cn/

https://github.com/ElemeFE/element

• 安裝

npm install element-ui -S

• 使用

import Vue from 'vue'
import Element from 'element-ui'

Vue.use(Element)

// 按需引入
import {
  Select,
  Button
  // ...
} from 'element-ui'

Vue.component(Select.name, Select)
Vue.component(Button.name, Button)

vue引入公共/全局組件

/*
    引入公共及全局組件配置
*/ 

// 引入側(cè)邊欄及聯(lián)系人
import winBar from './components/winbar'
import sideBar from './components/sidebar'
import recordList from './components/recordList'
import contactList from './components/contact'

// 引入jquery
import $ from 'jquery'

// 引入wcPop彈窗插件
import wcPop from './assets/js/wcPop/wcPop'
import './assets/js/wcPop/skin/wcPop.css'

// 引入餓了么pc端UI庫(kù)
import elementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

// 引入圖片預(yù)覽插件
import photoPreview from 'vue-photo-preview'
import 'vue-photo-preview/dist/skin.css'

// 引入自定義滾動(dòng)條插件
import geminiScrollbar from 'vue-gemini-scrollbar'

// 引入加載更多插件
import infiniteLoading from 'vue-infinite-scroll'

// 引入高德地圖
import vueAMap from 'vue-amap'


const install = Vue => {
    // 注冊(cè)組件
    Vue.component('win-bar', winBar)
    Vue.component('side-bar', sideBar)
    Vue.component('record-list', recordList)
    Vue.component('contact-list', contactList)

    // 應(yīng)用實(shí)例
    Vue.use(elementUI)
    Vue.use(photoPreview, {
        loop: false,
        fullscreenEl: true, //是否全屏
        arrowEl: true, //左右按鈕
    });
    Vue.use(geminiScrollbar)
    Vue.use(infiniteLoading)
    Vue.use(vueAMap)
    vueAMap.initAMapApiLoader({
        key: "e1dedc6bdd765d46693986ff7ff969f4",
        plugin: [
            "AMap.Autocomplete", //輸入提示插件
            "AMap.PlaceSearch", //POI搜索插件
            "AMap.Scale", //右下角縮略圖插件 比例尺
            "AMap.OverView", //地圖鷹眼插件
            "AMap.ToolBar", //地圖工具條
            "AMap.MapType", //類別切換控件，實(shí)現(xiàn)默認(rèn)圖層與衛(wèi)星圖、實(shí)施交通圖層之間切換的控制
            "AMap.PolyEditor", //編輯 折線多，邊形
            "AMap.CircleEditor", //圓形編輯器插件
            "AMap.Geolocation" //定位控件，用來(lái)獲取和展示用戶主機(jī)所在的經(jīng)緯度位置
        ],
        uiVersion: "1.0"
    });

}

export default install

效果圖

vue主頁(yè)面main.js配置

/*
 *  主頁(yè)面js
 */
import Vue from 'vue'
import App from './App.vue'

import router from './router'
import store from './vuex'

// 引入公共Js
import './common.js'

// 引入全局組件
// 方式一：
// Vue.component('headerBar', resolve => require(['./common/header'], resolve))
// Vue.component('tab-bar', resolve => require(['./common/footer'], resolve))
// 方式二：
import _g_component from './components.js'
Vue.use(_g_component)

new Vue({
  el: '#app',
  router,
  store,
  render: h => h(App)
})

app.vue頁(yè)面配置

• 頁(yè)面主面板模板

<template>
  <div id="app">
    <div class="vChat-wrapper flexbox flex-alignc">
      <div class="vChat-panel" style="background-image: url(src/assets/img/placeholder/vchat__panel-bg01.jpg);">
        <div class="vChat-inner flexbox">
          <!-- //頂部按鈕(最大、最小、關(guān)閉) -->
          <win-bar></win-bar>

          <!-- //側(cè)邊欄 -->
          <side-bar v-if="!$route.meta.hideSideBar"></side-bar>

          <keep-alive>
            <router-view class="flex1 flexbox"></router-view>
          </keep-alive>

        </div>
      </div>
    </div>
  </div>
</template>

• 引入css

<style>
/* 引入公共樣式 */
@import './assets/fonts/iconfont.css';
@import './assets/css/reset.css';
@import './assets/css/layout.css';
</style>

vue頁(yè)面路由配置

/*
 *  頁(yè)面地址路由js
 */ 
import Vue from 'vue'
import Router from 'vue-router'
import store from '../vuex'

// 通過改寫router.go方法，當(dāng)new Router 實(shí)例就包含back方法
Router.prototype.back = function(){
    window.history.go(-1)
}

Vue.use(Router)

const router = new Router({
    routes: [
        // 登錄、注冊(cè)
        {
            path: '/login',
            component: resolve => require(['../views/auth/login'], resolve),
            meta: { hideSideBar: true },
        },
        {
            path: '/register',
            component: resolve => require(['../views/auth/register'], resolve),
            meta: { hideSideBar: true },
        },
		
        //...
		
        // 聊天頁(yè)面
        {
            path: '/chat',
            component: resolve => require(['../views/chat/group-chat'], resolve),
            meta: { requireAuth: true }
        },
		
		//...
		
    ]
});

export default router

router.beforeEach和next實(shí)現(xiàn)路由攔截驗(yàn)證

// 注冊(cè)全局鉤子（攔截登錄狀態(tài)）
router.beforeEach((to, from, next) => {
    const token = store.state.token
    // 判斷該路由地址是否需要登錄權(quán)限
    if(to.meta.requireAuth){
        // 判斷token是否存在
        if(token){
            next()
        }else{
            next()
            // 未登錄授權(quán)
            wcPop({
                content: '還未登錄授權(quán)！', anim: 'shake', style: 'background:#e03b30;color:#fff;', time: 2,
                end: function(){
                    next({ path: '/login' })
                }
            });
        }
    }else{
        next()
    }
})

?? 最后

如果你覺得這篇文章對(duì)你有幫助，麻煩點(diǎn)個(gè)「關(guān)注/轉(zhuǎn)發(fā)」，讓更多的人也能看到你的分享！