查看: 62|回复: 1

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

[复制链接]

该用户从未签到

18

主题

21

帖子

117

积分

注册会员

Rank: 2

积分
117
QQ
发表于 2021-1-11 13:48:54 | 显示全部楼层 |阅读模式

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

未标题-bb4.png

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



p3.gif

目录结构
360截图20210108163529277.png

001360截图20210106132254802.png 002360截图20210106132635848.png
004360截图20210106133203633.png 005360截图20210106133249218.png
006360截图20210106133458736.png 007360截图20210106133724816.png
010360截图20210106133823578.png 011360截图20210106133852232.png
015360截图20210106134038840.png 016360截图20210106134102273.png
018360截图20210106134520602.png 019360截图20210106134720351.png
021360截图20210106135048954.png 022360截图20210106135407870.png
023360截图20210106135622872.png 024360截图20210106135641646.png
025360截图20210106135750336.png 026360截图20210106140015296.png
027360截图20210106140127630.png 029360截图20210106140641656.png
031360截图20210106141014227.png 033360截图20210106141139735.png

vue3.0自定义导航+弹框组件
大家看到的项目中顶部导航及弹框功能,均是使用vue3自定义组件实现。
未标题-360截图20201228225915303.png
大家如果感兴趣,可以去看看之前的这篇分享文章。
vue3.0自定义弹框组件|vue3仿微信/ios弹窗效果


vue.config.js配置
  1. const path = require('path')

  2. module.exports = {
  3.     // 基本路径
  4.     // publicPath: '/',

  5.     // 输出文件目录
  6.     // outputDir: 'dist',

  7.     // assetsDir: '',

  8.     // 环境配置
  9.     devServer: {
  10.         // host: 'localhost',
  11.         // port: 8080,
  12.         // 是否开启https
  13.         https: false,
  14.         // 编译完是否打开网页
  15.         open: false,
  16.         
  17.         // 代理配置
  18.         // proxy: {
  19.         //     '^/api': {
  20.         //         target: '<url>',
  21.         //         ws: true,
  22.         //         changeOrigin: true
  23.         //     },
  24.         //     '^/foo': {
  25.         //         target: '<other_url>'
  26.         //     }
  27.         // }
  28.     },

  29.     // webpack配置
  30.     chainWebpack: config => {
  31.         // 配置路径别名
  32.         config.resolve.alias
  33.             .set('@', path.join(__dirname, 'src'))
  34.             .set('@assets', path.join(__dirname, 'src/assets'))
  35.             .set('@components', path.join(__dirname, 'src/components'))
  36.             .set('@views', path.join(__dirname, 'src/views'))
  37.     }
  38. }
复制代码


主页面main.js配置
引入一些公共组件/样式,路由及vuex状态管理。
  1. import { createApp } from 'vue'
  2. import App from './App.vue'

  3. // 引入vuex和路由配置
  4. import store from './store'
  5. import router from './router'

  6. // 引入js
  7. import '@assets/js/fontSize'

  8. // 引入公共组件
  9. import Plugins from './plugins'

  10. const app = createApp(App)

  11. app.use(store)
  12. app.use(router)
  13. app.use(Plugins)

  14. app.mount('#app')
复制代码


vue3表单验证
基于vue3.0语法的表单验证操作。使用getCurrentInstance获取this,可用来操作storerouter等。
  1. <script>  
  2. import { reactive, inject, getCurrentInstance } from 'vue'  
  3. export default {  
  4.     components: {},  
  5.     setup() {  
  6.         const { ctx } = getCurrentInstance()  

  7.         const v3popup = inject('v3popup')  
  8.         const utils = inject('utils')  
  9.         const formObj = reactive({})  

  10.         // ...  

  11.         const handleSubmit = () => {  
  12.             if(!formObj.tel){  
  13.                 Snackbar('手机号不能为空!')  
  14.             }else if(!utils.checkTel(formObj.tel)){  
  15.                 Snackbar('手机号格式不正确!')  
  16.             }else if(!formObj.pwd){  
  17.                 Snackbar('密码不能为空!')  
  18.             }else{  
  19.                 ctx.$store.commit('SET_TOKEN', utils.setToken());  
  20.                 ctx.$store.commit('SET_USER', formObj.tel);  

  21.                 // ...  
  22.             }  
  23.         }  

  24.         return {  
  25.             formObj,  
  26.             handleSubmit  
  27.         }  
  28.     }  
  29. }  
  30. </script>
复制代码
p1.gif

vue3全局钩子拦截登录
vue3中使用路由router.beforeEach来拦截页面登录状态。
  1. router.beforeEach((to, from, next) => {
  2.     const token = store.state.token

  3.     // 判断当前路由地址是否需要登录权限
  4.     if(to.meta.requireAuth) {
  5.         if(token) {
  6.             next()
  7.         }else {
  8.             // 未登录授权
  9.             V3Popup({
  10.                 content: '还未登录授权!', position: 'top', popupStyle: 'background:#fa5151;color:#fff;', time: 2,
  11.                 onEnd: () => {
  12.                     next({ path: '/login' })
  13.                 }
  14.             })
  15.         }
  16.     }else {
  17.         next()
  18.     }
  19. })
复制代码
ok,基于vue3.0实战聊天项目就暂时分享到这里。后续还会分享一些vue3实例项目,感谢大家的支持!
uniapp直播实例|uni-app+vue实现抖音小视频

qrcode_公众号_物料2.png


回复

使用道具 举报

  • TA的每日心情
    奋斗
    2019-4-25 09:15
  • 签到天数: 1 天

    [LV.1]初来乍到

    0

    主题

    8

    帖子

    23

    积分

    新手上路

    Rank: 1

    积分
    23
    发表于 前天 10:10 | 显示全部楼层
    66666666666666
    回复 支持 反对

    使用道具 举报

    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    Archiver|手机版|小黑屋|Swiper中文网 ( 粤ICP备15001020号

    GMT+8, 2021-1-20 16:01 , Processed in 0.089481 second(s), 31 queries .

    Powered by Discuz! X3.2

    © 2001-2013 Comsenz Inc.

    快速回复 返回顶部 返回列表