基于vue3.0+vant3聊天实例|vue3仿微信app界面

项目介绍

Vue3Chatroom 一个基于vue3.0+vant3.x搭建开发的仿微信手机端app界面聊天实例。实现了发送消息/动图gif、图片/视频预览、网址链接查看、下拉刷新、红包/朋友圈等功能。

技术栈

• 编码+技术：Vscode + Vue3.x/Vuex4.x/Vue-Router4
• UI组件库：Vant3.x (有赞移动端vue3.0组件库)
• 弹层组件：V3Popup（基于vue3自定义弹层组件）
• iconfont图标：阿里字体图标库
• 自定义顶部Navbar栏+底部Tabbar

项目结构

vue3.0自定义navbar+tabbar组件

项目中顶部导航条和底部tab栏均是自定义组件实现。

大家如果对其实现方式感兴趣，可以去看看vue2中实现方式。
vue.js实现自定义顶部导航+底部tab切换

vue3.0自定义移动端弹框

项目中各种弹框场景都是基于vue3开发的自定义弹框组件实现的。

v3popup一款集合多种弹框动画及类型的Vue3多功能mobile弹框组件。
vue3.0系列之自定义mobile弹框组件|vue3移动端对话框

vue.config.js基本配置

vue3中 vue.config.js 基础配置信息。

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

引入一些公共组件/样式，路由、状态管理等文件。

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

vue3.0表单验证及登录拦截

vue3中使用 getCurrentInstance 获取当前上下文，用来操作store或router。

vue3中配置 全局钩子 实现拦截登录状态。

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

    // 判断当前路由地址是否需要登录权限
    if(to.meta.requireAuth) {
        if(token) {
            next()
        }else {
            // 未登录授权
            V3Popup({
                content: '还未登录授权！', position: 'top', popupStyle: 'background:#fa5151;color:#fff;', time: 2,
                onEnd: () => {
                    next({ path: '/login' })
                }
            })
        }
    }else {
        next()
    }
})

vue3.0聊天模块

项目中聊天编辑器部分抽离公共组件Editor，基于div可编辑contenteditable属性实现功能。

/**
 * @Desc     Vue3.0实现文字+emoj表情混排
 * @Time     andy by 2021-01
 * @About    Q：282310962  wx：xy190310
 */

行了，基于vue3实现聊天项目就介绍到这里。希望以上分享对大家有些帮助！

最后附上一个uniapp实例项目
uniapp+vue仿抖音小视频|uni-app直播实例