不得不说,最近不断捣鼓Vue3开发,Vue.js越来越优秀。特别是大规模的Vite构建工具真的是速度很快。本来想使用vite构建vue3项目,但是不知道为什么构建vite的项目使用了van,也不知道大家有没有遇到这种情况。(阿尔伯特爱因斯坦)(美国)。

后来就改用vue/cli来构建vue3项目了。

vue3更加灵活、高效,目前拥有star高达20K+。

项目简介

vue3-chatroom 基于vue3.0+vuex+vue-router4+van等技术开发的手机端仿微信App界面聊天项目。实现了发送消息/动图、图片/视频预览、网址链接预览、消息下拉、红包/朋友圈等功能。

使用技术

  • 技术框架:vue3.0+vuex4+vue-router4
  • UI组件库:van(有赞Vue3移动端组件库)
  • 弹框组件:V3Popup(基于Vue3自定义移动端弹框)
  • 字体图标:阿里iconfont字体图标库

效果预览

Vue3自定义Navbar和tabBar组件

项目中顶部导航及底部Tabbar组件都是自定义实现。分别封装在compoents目录下。

前段时间有分享过一篇文章,这里就不详细介绍了。大家如果感兴趣可以去看看。

Vue3.0自定义导航栏+底部tabbar组件

Vue3自定义弹框v3popup

项目中所有弹框功能都是v3popup组件实现。

大家如果对弹框功能感兴趣,可以看看下面这个演示视频。

vue.con配置

vue3中项目的一些常用简单配置。

/** * Vue3页面配置文件 */ 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 => { // 配置路径别名 con .set('@', (__dirname, 'src')) .set('@assets', (__dirname, 'src/assets')) .set('@components', (__dirname, 'src/components')) .set('@views', (__dirname, 'src/views')) } }

入口main.js配置

引入vuex状态管理、路由及一些公共组件。

/** * 主入口页面js */ import { createApp } from 'vue' import App from '.; // 引入vuex和地址路由 import store from './store' import router from './router' // 引入js import '@assets/js/fontSize' // 引入公共组件 import Plugins from './plugins' const app = createApp(App) a(store) a(router) a(Plugins) a('#app')

Vue3路由配置

/** * Vue3.0路由地址 */ import { createRouter, createWebHistory } from 'vue-router' const routes = [ // 登录/注册 { name: 'login', path: '/login', component: () => import('../views/au;), }, { name: 'register', path: '/register', component: () => import('../views/au;), }, // 首页 { name: 'index', path: '/', component: () => import('../views/index'), meta: { requireAuth: true } }, // ... ] const router = createRouter({ history: createWebHistory(), routes, }) export default router

vue3中实现全局钩子拦截状态。

// 全局钩子拦截登录状态 rou((to, from, next) => { const token = // 判断当前路由地址是否需要登录权限 i) { if(token) { next() }else { // 未登录授权 V3Popup({ content: '还未登录授权!', position: 'top', time: 2, onEnd: () => { next({ path: '/login' }) } }) } }else { next() } })

Vue3登录表单实现

vue3.0中实现表单登录验证功能。

<!-- //登录模板 --> <template> <div> <div class="vui__scrollview vui__scrollview-lgreg flex1"> <div class="nt__lgregPanel"> <div class="lgreg-header"> <div class="slogan"> <img class="logo" src="@asse; /> <p class="text ff-st">欢迎使用Vue3-Chatroom</p> </div> <div class="forms"> <form @;handleSubmit"> <div class="item flexbox flex_alignc"> <input class="iptxt flex1" type="text" v-model="; placeholder="请输入手机号" maxlength="11" /> </div> <div class="item flexbox flex_alignc"> <input class="iptxt flex1" type="password" v-model="; placeholder="请输入密码" /> </div> <div class="item btns"> <button class="vui__btn vui__btn-primary" type="submit">登录</button> </div> <div class="item lgreg-lk"> <router-link class="navigator" to="#">忘记密码</router-link> <router-link class="navigator" to="/register">注册账号</router-link> </div> </form> </div> </div> </div> </div> </div> </template> <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 Snackbar = (content) => { v3popup({ content: `<div style='text-align:left;'>${content}</div>`, popupStyle: 'background:#ff4848;border-radius:1px;color:#fff;', position: 'bottom', time: 2 }) } const handleSubmit = () => { if(!){ Snackbar('手机号不能为空!') }else if(!u()){ Snackbar('手机号格式不正确!') }else if(!){ Snackbar('密码不能为空!') }else{ ctx.$('SET_TOKEN', u()); ctx.$('SET_USER', ); v3popup({ content: '恭喜,登录成功!', time: 2, shadeClose: false, onEnd() { ctx.$rou('/') } }) } } return { formObj, handleSubmit } } } </script>

项目中所有的模板页及功能均是采用Vue3语法实现,全面拥抱Composition API语法。

ok,基于Vue3开发聊天功能,暂时就分享到这里。感谢大家的阅读~~