首页手记基于vue3+vant3.x聊天实战|vue3.0仿微...

基于vue3+vant3.x聊天实战|vue3.0仿微信聊天模板|vue3实例开发

标签：

Node.js Vue.js vuex

2021年随着尤大相继推出的vue3.x和vite2构建工具的稳定版，让vue.js再一次成为开发者热捧的前端框架。支持国产的崛起！👏

项目简述

基于vue3全家桶技术vue3.x+vuex4+vue-router4 及 vant3+v3popup 构架开发的仿微信mobile端界面聊天实例[Vue3Chat项目]。

vue3-chat 实现图文消息、图片/视频预览、网址查看、红包/朋友圈等功能。

技术栈

框架技术：vscode编码 + vue3.x/vue-router@4+vuex4
组件库：vant3.x (有赞移动端 vue3.0 组件库)
弹框组件：v3-popup （基于 vue3 弹层组件）
字体图标：阿里 iconfont 字体图标库
自定义顶部 Navbar+底部 Tabbar

项目目录结构

整个项目均是采用vue3.x全新语法编写开发。

项目整体布局分为顶部导航+内容区+底部tab标签栏。

vue3自定义topbar+tab标签栏

vue3实现全局弹框组件

项目中使用到的弹出框功能，是使用vue3.x自定义组件实现。

V3Popup 基于vue3.x实现的移动端弹出框组件，集合msg、alert、dialog、actionSheet、toast等多种效果。支持**20+**种自定义参数配置。

项目配置文件

vue.config.js对项目进行一些基础配置，可以配置一些路径alias别名。

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

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

vue3引入公共组件

在main.js中引入一些路由、vuex配置，公共组件及样式。

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实现表单验证

vue3语法实现表单登录验证功能。

<script>
import { reactive, inject, getCurrentInstance } from 'vue'
export default {
    components: {},
    setup() {
        const { ctx } = getCurrentInstance()

        const v3popup = inject('v3popup')
        const utils = inject('utils')
        const formObj = reactive({})

        // ...

        const handleSubmit = () => {
            if(!formObj.tel){
                Snackbar('手机号不能为空！')
            }else if(!utils.checkTel(formObj.tel)){
                Snackbar('手机号格式不正确！')
            }else if(!formObj.pwd){
                Snackbar('密码不能为空！')
            }else{
                ctx.$store.commit('SET_TOKEN', utils.setToken());
                ctx.$store.commit('SET_USER', formObj.tel);

                // ...
            }
        }

        return {
            formObj,
            handleSubmit
        }
    }
}
</script>

大家可以看到在vue3的setup函数中不能使用this，转而使用getCurrentInstance替代了。

vue3实现朋友圈功能

通过在onMounted中监听scroll滚动事件来控制顶部导航的透明度。

<!-- //朋友圈模板 -->
<template>
    <div>
        <header-bar :bgcolor="headerBg" transparent zIndex="1010">
            <template #backIco><i class="iconfont icon-arrL"></i></template>
            <template v-slot:right><div @click="isShowPublish=true"><i class="iconfont icon-tianjia"></i></div></template>
        </header-bar>

        <div class="vui__scrollview flex1" ref="scrollview">
            ...
        </div>
    </div>
</template>

<script>
import { onMounted, onBeforeUnmount, ref, reactive, toRefs, inject } from 'vue'
import { ImagePreview } from 'vant'

export default {
    components: {},
    setup() {
        const scrollview = ref(null)

        const data = reactive({
            headerBg: 'transparent',
            // ...
        })

        onMounted(() => {
            scrollview.value.addEventListener('scroll', handleScroll)
        })

        onBeforeUnmount(() => {
            scrollview.value.removeEventListener('scroll', handleScroll)
        })

        // 页面滚动处理
        const handleScroll = (e) => {
            if(e.target.scrollTop > 160) {
                data.headerBg = 'linear-gradient(to right, #00d2ee, #00e077)'
            }else {
                data.headerBg = 'transparent';
            }
        }

        // ...

        return {
            ...toRefs(data),
            scrollview,
            
            // ...
        }
    }
}
</script>

ok，基于vue3.x+vuex+vant3开发聊天界面实例就先分享到这里。
后续还会分享一些vue3实战案例项目。敬请关注！！