vue3.0仿製微信app聊天|vue3.x+vant3.x實戰聊天|仿朋友圈

一、專案描述

基於Vue3.0全家桶技術 vue3.0+@vue/cli+vuex4+vue-router4+webpack+vant3 構建的高仿微信app介面聊天專案Vue3Chatroom。實現傳送訊息/emoj表情、圖片/視訊預覽、網址連結檢視、下拉重新整理、自定義長按選單、紅包/朋友圈等功能。

二、技術實現

• MVVM 框架：Vue.js 3.0
• 狀態管理：Vuex4
• 頁面路由：Vue-router@4
• 元件庫：vant3.x(有贊vue3移動端UI元件庫)
• 彈層元件：v3popup(基於vue3自定義彈框)
• 字型圖示：iconfont字型圖示庫
• 環境配置：node.js + npm/yarn

目錄結構

vue3彈框元件

大家看到的專案中彈框功能都是基於vue3.0開發的自定義元件實現。

由於之前有過一篇分享，這裡就不詳細介紹了。
vue3.x自定義彈框元件|vue3.0移動端彈窗|vue3全域性元件

vue.config.js配置

進行一些簡單的專案配置，可以配置一些webpack路徑別名，避免專案中過多的使用../../路徑。

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

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表單登入驗證

<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.x中全域性路由鉤子實現登入攔截驗證。

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狀態管理

vue3.x中狀態管理寫法和vue2有些區別。

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

ok，基於vue3.x搭建聊天實戰專案就暫時分享到這裡。希望各位能喜歡~
Electron+Vue仿微信客戶端聊天例項|electron-vue桌面端聊天

本作品採用《CC 協議》，轉載必須註明作者和本文連結