Vue3.0聊天室|vue3+vant3仿微信聊天实例|vue3.x仿微信app界面

一、项目简介

基于Vue3.0+Vant3.x+Vuex4.x+Vue-router4+V3Popup等技术开发实现的仿微信手机App聊天实例项目Vue3-Chatroom。实现了发送图文表情消息/gif图、图片/视频预览、网址查看、下拉刷新功能、红包/朋友圈等功能。

二、技术选型

• 编辑器：VScode/Sublime
• 使用技术：Vue3.x+Vuex4.x+Vue-Router4
• UI组件库：Vant-UI3.x (有赞移动端Vue3组件库)
• 弹层组件：V3Popup（基于vue3.0封装自定义弹出层组件）
• iconfont图标：阿里字体图标库
• 自定义顶部导航栏+底部tabBar

◆ 项目结构

◆ Vue3自定义顶部Navbar+底部Tabbar

项目中顶部导航条和底部tabbar组件均是在之前vue2版的基础上开发的vue3版。

大家如果感兴趣，可以去看看之前的一篇分享文章。

https://www.cnblogs.com/xiaoyan2017/p/13791980.html

◆ Vue3自定义弹层组件

项目中使用到的弹框场景，均是最新开发的vue3.0自定义弹框组件v3popup来实现的。

v3popup一款汇集多种弹框类型及动画效果的vue3.x弹框组件。开发灵感来源于之前的vue2版，并在功能及效果上保持一致性。

如果大家对具体的实现感兴趣的话，可以去看看之前的这篇文章。

https://www.cnblogs.com/xiaoyan2017/p/14210820.html

◆ vue.config.js配置

/**
 * Vue3基础配置文件
 */

const path = require('path')

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

    // 输出文件目录
    // outputDir: 'dist',

    // assetsDir: '',

    // 环境配置
    devServer: {
        // host: 'localhost',
        // port: 8080,
        // 是否开启https
        https: false,
        // 编译完是否打开网页
        open: false,
        
        // 代理配置
        // proxy: {
        //     '^/api': {
        //         target: '',
        //         ws: true,
        //         changeOrigin: true
        //     },
        //     '^/foo': {
        //         target: ''
        //     }
        // }
    },

    // 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('@views', path.join(__dirname, 'src/views'))
    }
}

◆ Vue3.0主入口页面

在main.js中配置一些状态管理、地址路由，引入一些js和公共组件。

import { createApp } from 'vue'
import App from './App.vue'

// 引入vuex和地址路由
import store from './store'
import router from './router'

// 引入js
import '@assets/js/fontSize'

// 引入公共组件
import Plugins from './plugins'

const app = createApp(App)

app.use(store)
app.use(router)
app.use(Plugins)

app.mount('#app')

◆ Vuex + 表单登录验证

vue3中状态管理及表单验证操作。

import { createStore } from 'vuex'

export default createStore({
    state: {
        user: localStorage.getItem('user') || null,
        token: localStorage.getItem('token') || null
    },
    mutations: {
        SET_USER(state, data) {
            localStorage.setItem('user', data)
            state.user = data
        },
        SET_TOKEN(state, data) {
            localStorage.setItem('token', data)
            state.token = data
        },
        LOGOUT(state) {
            localStorage.removeItem('user')
            localStorage.removeItem('token')
            state.user = null
            state.token = null
        }
    },
    getters: {},
    actions: {}
})

◆ 仿微信朋友圈透明导航实现

vue3通过在onMounted中监听scroll事件来控制顶部导航透明显示。

◆ Vue3聊天代码片段

vue3中实现聊天功能实现，其中编辑器支持图文插入，并且单独抽离了一个 Editor.vue 组件。

/**
 * @Desc     Vue3.0仿微信聊天实例
 * @Time     andy by 2021-01
 * @About    Q：282310962  wx：xy190310
 */

okey，以上就是基于vue3开发仿微信界面聊天室的介绍。希望大家能喜欢~~:muscle::muscle:

最后附上一个Electron+Vue聊天实例

https://www.cnblogs.com/xiaoyan2017/p/12169391.html