vue3.x实战开发：vue3全家桶仿微信|vue3.0聊天实例

xiaoyan2015

项目概述
Vue3WChat聊天 基于vue3.x+@vue/cli+vuex4+vueRouter4+vant3.x+v3popup等技术建构的仿制微信/QQ界面聊天实例。



技术架构

• 编码工具：vscode
• 前端框架：vue3.0
• 状态管理：vuex4.x
• 地址路由：vue-router4.x
• UI组件库：vant-ui3.0 (有赞移动端vue3.0组件库)
• 弹层组件：v3popup（基于vue3自定义弹窗组件）
• iconfont图标：阿里字体图标库
• 自定义顶部headerBar+底部tabBar组件
  

目录结构














vue3.0自定义导航+弹框组件
大家看到的项目中顶部导航及弹框功能，均是使用vue3自定义组件实现。

大家如果感兴趣，可以去看看之前的这篇分享文章。
vue3.0自定义弹框组件|vue3仿微信/ios弹窗效果


vue.config.js配置

1. const path = require('path')
   
2. 
   
3. module.exports = {
   
4.     // 基本路径
   
5.     // publicPath: '/',
   
6. 
   
7.     // 输出文件目录
   
8.     // outputDir: 'dist',
   
9. 
   
10.     // assetsDir: '',
    
11. 
    
12.     // 环境配置
    
13.     devServer: {
    
14.         // host: 'localhost',
    
15.         // port: 8080,
    
16.         // 是否开启https
    
17.         https: false,
    
18.         // 编译完是否打开网页
    
19.         open: false,
    
20.         
    
21.         // 代理配置
    
22.         // proxy: {
    
23.         //     '^/api': {
    
24.         //         target: '<url>',
    
25.         //         ws: true,
    
26.         //         changeOrigin: true
    
27.         //     },
    
28.         //     '^/foo': {
    
29.         //         target: '<other_url>'
    
30.         //     }
    
31.         // }
    
32.     },
    
33. 
    
34.     // webpack配置
    
35.     chainWebpack: config => {
    
36.         // 配置路径别名
    
37.         config.resolve.alias
    
38.             .set('@', path.join(__dirname, 'src'))
    
39.             .set('@assets', path.join(__dirname, 'src/assets'))
    
40.             .set('@components', path.join(__dirname, 'src/components'))
    
41.             .set('@views', path.join(__dirname, 'src/views'))
    
42.     }
    
43. }

复制代码

主页面main.js配置
引入一些公共组件/样式，路由及vuex状态管理。

1. import { createApp } from 'vue'
   
2. import App from './App.vue'
   
3. 
   
4. // 引入vuex和路由配置
   
5. import store from './store'
   
6. import router from './router'
   
7. 
   
8. // 引入js
   
9. import '@assets/js/fontSize'
   
10. 
    
11. // 引入公共组件
    
12. import Plugins from './plugins'
    
13. 
    
14. const app = createApp(App)
    
15. 
    
16. app.use(store)
    
17. app.use(router)
    
18. app.use(Plugins)
    
19. 
    
20. app.mount('#app')

复制代码

vue3表单验证
基于vue3.0语法的表单验证操作。使用getCurrentInstance获取this，可用来操作store或router等。

1. <script>  
   
2. import { reactive, inject, getCurrentInstance } from 'vue'  
   
3. export default {  
   
4.     components: {},  
   
5.     setup() {  
   
6.         const { ctx } = getCurrentInstance()  
   
7. 
   
8.         const v3popup = inject('v3popup')  
   
9.         const utils = inject('utils')  
   
10.         const formObj = reactive({})  
    
11. 
    
12.         // ...  
    
13. 
    
14.         const handleSubmit = () => {  
    
15.             if(!formObj.tel){  
    
16.                 Snackbar('手机号不能为空！')  
    
17.             }else if(!utils.checkTel(formObj.tel)){  
    
18.                 Snackbar('手机号格式不正确！')  
    
19.             }else if(!formObj.pwd){  
    
20.                 Snackbar('密码不能为空！')  
    
21.             }else{  
    
22.                 ctx.$store.commit('SET_TOKEN', utils.setToken());  
    
23.                 ctx.$store.commit('SET_USER', formObj.tel);  
    
24. 
    
25.                 // ...  
    
26.             }  
    
27.         }  
    
28. 
    
29.         return {  
    
30.             formObj,  
    
31.             handleSubmit  
    
32.         }  
    
33.     }  
    
34. }  
    
35. </script>

复制代码

vue3全局钩子拦截登录
vue3中使用路由router.beforeEach来拦截页面登录状态。

1. router.beforeEach((to, from, next) => {
   
2.     const token = store.state.token
   
3. 
   
4.     // 判断当前路由地址是否需要登录权限
   
5.     if(to.meta.requireAuth) {
   
6.         if(token) {
   
7.             next()
   
8.         }else {
   
9.             // 未登录授权
   
10.             V3Popup({
    
11.                 content: '还未登录授权！', position: 'top', popupStyle: 'background:#fa5151;color:#fff;', time: 2,
    
12.                 onEnd: () => {
    
13.                     next({ path: '/login' })
    
14.                 }
    
15.             })
    
16.         }
    
17.     }else {
    
18.         next()
    
19.     }
    
20. })

复制代码

ok，基于vue3.0实战聊天项目就暂时分享到这里。后续还会分享一些vue3实例项目，感谢大家的支持！
uniapp直播实例|uni-app+vue实现抖音小视频

jianglong

66666666666666

wytongcxf

这是高手