Swiper中文论坛

标题: vue3.x实战开发：vue3全家桶仿微信|vue3.0聊天实例 [打印本页]
作者: xiaoyan2015    时间: 2021-1-11 13:48
标题: vue3.x实战开发：vue3全家桶仿微信|vue3.0聊天实例

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



技术架构





目录结构














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

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


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

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

  7.     // 输出文件目录
  8.     // outputDir: 'dist',

  10.     // assetsDir: '',

  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.     },

  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'

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

  8. // 引入js
  9. import '@assets/js/fontSize'

  11. // 引入公共组件
  12. import Plugins from './plugins'

  14. const app = createApp(App)

  16. app.use(store)
  17. app.use(router)
  18. app.use(Plugins)

  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()  

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

  12.         // ...  

  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);  

  25.                 // ...  
  26.             }  
  27.         }  

  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

  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    时间: 2021-1-18 10:10
66666666666666
作者: wytongcxf    时间: 2021-5-8 17:25
这是高手



欢迎光临 Swiper中文论坛 (http://bbs.swiper.com.cn/) Powered by Discuz! X3.2