Vue3.0桌面端聊天｜vue3仿微信/QQ網頁版聊天實例

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

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

// 官網地址
https://v3.vuejs.org/

Vitejs目前的star達到15.7K+。

// 官網地址
https://vitejs.dev/

項目介紹

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

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

技術棧

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

Vue3.x自定義彈窗組件

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

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

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

Vue3.x自定義美化滾動條組件

為了使得項目效果一致，所有頁面的滾動條均是采用vue3.0自定義組件實現。

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

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

Vue3.0系列：vue3定制美化滾動條組件v3scroll

vue.config.js項目配置

/**
 * Vue3.0項目配置
 */

const path = require('path')

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

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

    // assetsDir: '',

    // 環境配置
    devServer: {
        // host: 'localhost',
        // port: 8080,
        // 是否開啟https
        https: false,
        // 編譯完是否打開網頁
        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引入/注冊公共組件

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

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

// 引入vue3滾動條組件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)

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

    app.provide('utils', Utils)
}

export default Plugins

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

<!-- //虛化背景（毛玻璃） -->
<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攔截登錄狀態

vue3.0中使用全局路由鉤子攔截登錄狀態。

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

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

Vue3.x聊天模塊

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

編輯器抽離了一個公共的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>

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

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)
            }
        }
    }
})

還支持拖拽圖片至聊天區域進行發送。

<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: '暫時支持拖拽一張圖片', 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開發仿微信/QQ聊天實戰項目就分享到這里。

基于vue3.0+vant3移動端聊天實戰|vue3聊天模板實例

文約2500字，建議閱讀9分鐘

本文分享幾個值得學習和使用的前端低代碼開源項目，更深入地了解什么是低代碼。

近幾年，在技術領域低代碼是比較熱門的話題，比如阿里云推出了釘釘低代碼，通過簡單的拖拽、配置，即可完成業務應用的搭建，騰訊云則是推出了微搭，通過行業化模板、拖放式組件和可視化配置快速構建多端應用。

低代碼是基于可視化和模型驅動理念，結合云原生與多端體驗技術，它能夠在多數業務場景下實現大幅度的提效降本，為專業開發者提供了一種全新的高生產力開發范式。下面就來分享幾個值得學習和使用的前端低代碼開源項目，更深入地了解什么是低代碼。

1 Appsmith

Appsmith 是一款開源低代碼框架，主要用于構建管理面板、內部工具和儀表板等，允許拖放 UI 組件來構建頁面，通過連接到任何 API、數據庫或 GraphQL 源，并使用 JavaScript 語言編寫邏輯，可以在短時間內創建內部應用程序。

項目鏈接：https://github.com/appsmithorg/appsmith

最新star：24288

2 LowCodeEngine

LowCodeEngine 由阿里巴巴釘釘宜搭團隊開發的低代碼框架，基于阿里云的云基礎設施和釘釘的企業數字化操作系統。使用者只需要基于低代碼引擎便可以快速定制符合自己業務需求的低代碼平臺。同時LowCodeEngine還提供了很多的基礎組件，可以幫助開發者快速地構建業務頁面。

項目鏈接：https://github.com/alibaba/lowcode-demo

最新star：887

3 Amis

Amis 是百度開源的一款前端低代碼框架，通過 JSON 配置就能生成各種后臺頁面，包括數據獲取、表單提交及驗證等功能，同時，Amis內置 100+ 種 UI 組件，能夠滿足各種頁面組件展現的需求，極大減少開發成本，甚至可以不需要了解前端。amis 在百度內部得到了廣泛使用，在 4 年多的時間里創建了 3w 多頁面，從內容審核到機器管理，從數據分析到模型訓練，amis 滿足了各種各樣的頁面需求。我們可以下載源碼，然后使用如下的命令來體驗。

項目鏈接：https://github.com/baidu/amis

最新star：12860

4 tmagic-editor

tmagic-editor是一款由騰訊技術中心出品的一款開源低代碼框架，能夠實現零代碼/低代碼生成頁面，可以快速搭建可視化頁面生產平臺，讓非技術人員可以通過拖拽和配置，自助生成H5頁面、PC頁面、TV頁面，大大降低頁面生產成本。

項目鏈接：https://github.com/Tencent/tmagic-editor

最新star：3112

5 dooring-electron-lowcode

dooring-electron-lowcode是一款功能強大，專業可靠的可視化頁面配置解決方案，致力于提供一套簡單方便、專業可靠、無限可能的H5落地頁最佳實踐。技術棧以react和typescript為主，后臺采用nodejs開發, electron作為桌面端基礎方案。

項目鏈接：https://github.com/H5-Dooring/dooring-electron-lowcode

最新star：150

6 vite-vue3-lowcode

vite-vue3-lowcode 是一款基于Vite2.x + Vue3.x + TypeScript技術框架的的H5 低代碼平臺。目前只是一個簡單的模板，支持數據配置的導入和導出，配置的修改和刪除操作，用到的技術有sandbox 中執行自定義邏輯、monaco-editor 自定義代碼補全、vue3 createRenderer 自定義渲染器等。

項目鏈接：https://github.com/buqiyuan/vite-vue3-lowcode

最新star：2158

7 shida

shida是一個視頻可視化搭建項目，開發者可以通過拖拽就可以快速地生產一個短視頻，使用方式就像易企秀或百度 H5 等 h5 低代碼平臺一樣。shida的后端視頻合成部分是基于FFCreator進行開發的，FFCreator 是一個基于 node.js 的輕量、靈活的短視頻加工庫，只需要添加幾張圖片或視頻片段再加一段背景音樂，就可以快速生成一個很酷的視頻短片。

項目鏈接：https://github.com/tnfe/shida

最新star：363

8 quark-h5

quark-h5是一個使用Vue + Koa的前端低代碼框架，和大多數的前端低代碼框架一樣，采用的是編輯器生成頁面JSON數據，服務端負責存取JSON數據，渲染時從服務端取數據JSON交給前端模板處理。

項目鏈接：https://github.com/huangwei9527/quark-h5

最新star：3064

9 gods-pen

碼良是一個在線生成 H5 頁面并提供頁面管理和頁面編輯的平臺，用于快速制作 H5 頁面。用戶無需掌握復雜的編程技術，通過簡單拖拽、少量配置即可制作精美的頁面，可用于營銷場景下的頁面制作。同時，也為開發者提供了完備的編程接入能力，通過腳本和組件的形式獲得強大的組件行為和交互控制能力。

項目鏈接：https://github.com/ymm-tech/gods-pen

最新star：4247

10 luban-h5

魯班H5是基于Vue2.0開發的支持拖拽方式來快速生成頁面的低代碼平臺，功能基本類似于易企秀、Maka、百度等H5平臺。

項目鏈接：https://github.com/ly525/luban-h5

最新star：5654

11 mometa

mometa 并不是傳統主流的低代碼平臺（如 amis），mometa 是面向研發、代碼可視設計編輯平臺，更像是 dreamweaver、gui的可視編輯工具。借助它，我們可以獲得所見即所得的可視編輯開發體驗。

項目鏈接：https://github.com/imcuttle/mometa

最新star：3469

12 h5-factory

h5-factory是專題頁面可視化編輯工具，可以通過拖拽來設計頁面，并且支持一鍵生成html文件。

項目鏈接：https://github.com/xuhaiqing/h5-factory

插槽語法更漂亮

隨著Vue 2.6的推出，已經引入了插槽的簡寫方式，之前簡寫可用于事件（例如，@click表示v-on:click事件）或冒號表示方式用于綁定（:src）。例如，如果有一個表格組件，則可以按以下方式使用此功能：

$on(‘hook:’)

如果要在created或mounted方法中定義自定義事件偵聽器或第三方插件，并且需要在beforeDestroy方法中將其刪除以免引起任何內存泄漏，則可以使用此功能。使用$on(‘hook:’)方法，我們可以僅使用一種生命周期方法（而不是兩種）來定義/刪除事件。

prop 驗證

你可能已經知道可以將props驗證為原始類型，例如字符串，數字甚至對象。我們還可以使用自定義驗證器，例如，如果要針對字符串列表進行驗證：

動態指令參數

Vue 2.6 的最酷功能之一是可以將指令參數動態傳遞給組件。假設有一個按鈕組件，并且在某些情況下想監聽單擊事件，而在其他情況下想監聽雙擊事件。這就是動態指令派上用場的地方了：

重用同一路由的組件

有時，我們不同路由共用某些時，如果在這些路由之間切換，則默認情況下，共享組件將不會重新渲染，因為Vue 出于性能原因會重用該組件。但是，如果我們仍然希望重新渲染這些組件，則可以通過在路由器視圖組件中提供:key屬性來實現重新渲染。

從父類到子類的所有 props

這是一個非常酷的功能，可將所有prop從父組件傳遞到子組件。如果我們有另一個組件的包裝器組件，這將特別方便。因為，我們不必一個一個將prop傳遞給子組件，而是一次傳遞所有prop：

上面的可以代替下面的做法

從父類到子類的所有事件偵聽器

如果子組件不在父組件的根目錄下，則可以將所有事件偵聽器從父組件傳遞到子組件，如下所示：

如果子組件位于其父組件的根目錄下，則默認情況下它將獲得那些組件，因此不需要此小技巧。

$createElement

默認情況下，每個Vue實例都可以訪問$createElement方法來創建和返回虛擬節點。例如，可以利用它在可以通過v-html指令傳遞的方法中使用標記。在函數組件中，可以將此方法作為渲染函數中的第一個參數訪問。

使用 JSX

由于Vue CLI 3默認支持使用JSX，因此現在（如果愿意）我們可以使用JSX編寫代碼（例如，可以方便地編寫函數組件）。如果尚未使用Vue CLI 3，則可以使用babel-plugin-transform-vue-jsx獲得JSX支持。

自定義 v-model

默認情況下，v-model是@input事件監聽器和:value props上的語法糖。但是，我們可以在Vue組件中指定一個模型屬性，以定義使用什么事件和值

總結

希望這些竅門和技巧對你有所幫助，如果你也知道哪些技巧，歡迎留言。

原文：https://www.telerik.com/blogs/12-tips-and-tricks-to-improve-your-vue-projects

在線咨詢

上一篇：12個免費學習編程的網站
下一篇：Axure教程：實現移動端頁面上下滑動效果

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商