vue3.x实战开发：vue3全家桶仿微信|vue3.0聊天实例
项目概述
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配置
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配置
引入一些公共组件/样式，路由及vuex状态管理。
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表单验证
基于vue3.0语法的表单验证操作。使用getCurrentInstance获取this，可用来操作store或router等。
<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全局钩子拦截登录
vue3中使用路由router.beforeEach来拦截页面登录状态。
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()
}
})ok，基于vue3.0实战聊天项目就暂时分享到这里。后续还会分享一些vue3实例项目，感谢大家的支持！:victory:
uniapp直播实例|uni-app+vue实现抖音小视频
66666666666666 这是高手
页:
[1]