Vue3.0 imitates wechat app chat | vue3. X + vant3. X actual chat | imitates circle of friends

Time:2021-3-31

Vue3.0 imitates wechat app chat | vue3. X + vant3. X actual chat | imitates circle of friends

1、 Project description

Development technology based on vue3.0[email protected]/cli+vuex4+vue-router4+webpack+vant3Build a high imitation wechat app interface chat projectVue3Chatroom. It can send message / emoj expression, preview image / video, view URL link, pull down refresh, customize long press menu, red envelope / circle of friends and other functions.

2、 Technology implementation

  • MVVM framework: Vue.js three
  • State management: vuex4
  • Page Routing: [email protected]
  • Component library: vant3. X
  • Bullet layer component: v3pop (based on vue3 custom bullet frame)
  • Font Icon: Icon Font Icon Library
  • Environment configuration: node.js + npm/yarn

Vue3.0 imitates wechat app chat | vue3. X + vant3. X actual chat | imitates circle of friends
Vue3.0 imitates wechat app chat | vue3. X + vant3. X actual chat | imitates circle of friends
Vue3.0 imitates wechat app chat | vue3. X + vant3. X actual chat | imitates circle of friends
Vue3.0 imitates wechat app chat | vue3. X + vant3. X actual chat | imitates circle of friends
Vue3.0 imitates wechat app chat | vue3. X + vant3. X actual chat | imitates circle of friends
Vue3.0 imitates wechat app chat | vue3. X + vant3. X actual chat | imitates circle of friends
Vue3.0 imitates wechat app chat | vue3. X + vant3. X actual chat | imitates circle of friends
Vue3.0 imitates wechat app chat | vue3. X + vant3. X actual chat | imitates circle of friends
Vue3.0 imitates wechat app chat | vue3. X + vant3. X actual chat | imitates circle of friends
Vue3.0 imitates wechat app chat | vue3. X + vant3. X actual chat | imitates circle of friends
Vue3.0 imitates wechat app chat | vue3. X + vant3. X actual chat | imitates circle of friends
Vue3.0 imitates wechat app chat | vue3. X + vant3. X actual chat | imitates circle of friends
Vue3.0 imitates wechat app chat | vue3. X + vant3. X actual chat | imitates circle of friends
Vue3.0 imitates wechat app chat | vue3. X + vant3. X actual chat | imitates circle of friends
Vue3.0 imitates wechat app chat | vue3. X + vant3. X actual chat | imitates circle of friends
Vue3.0 imitates wechat app chat | vue3. X + vant3. X actual chat | imitates circle of friends

directory structure

Vue3.0 imitates wechat app chat | vue3. X + vant3. X actual chat | imitates circle of friends

Vue3 spring frame component

You can see that the bullet box function of the project is based on the implementation of user-defined components developed by vue3.0.
Vue3.0 imitates wechat app chat | vue3. X + vant3. X actual chat | imitates circle of friends
Since there was a sharing article before, I won’t introduce it in detail here.
Vue3. X custom pop-up component | vue3.0 mobile pop-up window | vue3 global component

vue.config.js to configure

For some simple project configuration, you can configure some webpack path aliases to avoid excessive use in the project../../route.

const path = require('path')

module.exports = {
    //Basic path
    // publicPath: '/',

    //Output file directory
    // outputDir: 'dist',

    // assetsDir: '',

    //Environment configuration
    devServer: {
        // host: 'localhost',
        // port: 8080,
        //Do you want to turn on HTTPS
        https: false,
        //Open web page after compiling
        open: false,

        //Agent configuration
        // proxy: {
        //     '^/api': {
        //         target: '<url>',
        //         ws: true,
        //         changeOrigin: true
        //     },
        //     '^/foo': {
        //         target: '<other_url>'
        //     }
        // }
    },

    //Webpack configuration
    chainWebpack: config => {
        //Configure path alias
        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'))
    }
}

main.js Portal page configuration

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

//Introducing vuex and routing configuration
import store from './store'
import router from './router'

//Introduce JS
import '@assets/js/fontSize'

//Introducing common components
import Plugins from './plugins'

const app = createApp(App)

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

app.mount('#app')

Vue3 form login verification

<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 ('mobile number cannot be empty! ')
            }else if(!utils.checkTel(formObj.tel)){
                The format of snackBar is incorrect! ')
            }else if(!formObj.pwd){
                SnackBar ('password cannot be empty! ')
            }else{
                ctx.$store.commit('SET_TOKEN', utils.setToken());
                ctx.$store.commit('SET_USER', formObj.tel);

                // ...
            }
        }

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

The global routing hook in vue3. X implements login interception verification.

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

    //Determine whether the current routing address needs login permission
    if(to.meta.requireAuth) {
        if(token) {
            next()
        }else {
            //No sign in authorization
            V3Popup({
                Content: 'not authorized yet! ', position: 'top', popupStyle: 'background:#fa5151;color:#fff;', time: 2,
                onEnd: () => {
                    next({ path: '/login' })
                }
            })
        }
    }else {
        next()
    }
})

Vue3 state management

There are some differences between state management in vue3. X and vue2.

/**
 *Vue3 state management
 */

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

OK, build a chat project based on vue3. X and share it here for the time being. I hope you like it~
An example of wechat like chat with electron + Vue
Vue3.0 imitates wechat app chat | vue3. X + vant3. X actual chat | imitates circle of friends

This work adoptsCC agreementReprint must indicate the author and the link of this article

This article is an original article, without the permission of the author can not be reproduced, welcome to share QQ (282310962) Wx (xy190310)

Recommended Today

Application analysis of Kafka storage system in twitter

When developers consume Twitter’s public data through the API, they need to be guaranteed in terms of reliability, speed and stability. Therefore, not long ago, we launched the account activity replay API to help developers improve the stability of their systems. This API is a data recovery tool. Developers can use it to retrieve events […]