最近一直在捣鼓Vue3开发，不得不说Vue.js越来越优秀了。尤大推出的Vite构建工具真是极速，本来是想着使用vite构建vue3项目，不知道为啥vite构建的项目使用vant-ui3.0会报错，不知道大家有没有遇到过这种情况。后来就改用vue/cli来构建vue3项目了。 vue3更加灵活、高效，目前拥有star高达20K+。 https://v3.cn.vuejs.org/https://github.com/vuejs/vue-next项目简介 vue3-chatroom 基于vue3.0+vuex+vue-router4+vant3.0+v3popup等技术开发的手机端仿微信App界面聊天项目。实现了发送消息/动图、图片/视频预览、网址链接预览、消息下拉、红包/朋友圈等功能。 使用技术 技术框架：vue3.0+vuex4+vue-router4UI组件库：vant-ui3.0（有赞Vue3移动端组件库）弹框组件：V3Popup（基于Vue3自定义移动端弹框）字体图标：阿里iconfont字体图标库 效果预览 Vue3自定义Navbar和tabBar组件 项目中顶部导航及底部Tabbar组件都是自定义实现。分别封装在compoents目录下。 前段时间有分享过一篇文章，这里就不详细介绍了。大家如果感兴趣可以去看看。 Vue3.0自定义导航栏+底部tabbar组件 Vue3自定义弹框v3popup 项目中所有弹框功能都是v3popup组件实现。 大家如果对弹框功能感兴趣，可以看看下面这个演示视频。 https://www.ixigua.com/i6911339156538917388/ vue.config.js配置 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 => { // 配置路径别名 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状态管理、路由及一些公共组件。 /** * 主入口页面js */import { createApp } from 'vue'import App from './App.vue'// 引入vuex和地址路由import store from './store'import router from './router'// 引入jsimport '@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路由地址 */import { createRouter, createWebHistory } from 'vue-router'const routes = [ // 登录/注册 { name: 'login', path: '/login', component: () => import('../views/auth/login.vue'), }, { name: 'register', path: '/register', component: () => import('../views/auth/register.vue'), }, // 首页 { name: 'index', path: '/', component: () => import('../views/index'), meta: { requireAuth: true } }, // ...]const router = createRouter({ history: createWebHistory(), routes,})export default routervue3中实现全局钩子拦截状态。 // 全局钩子拦截登录状态router.beforeEach((to, from, next) => { const token = store.state.token // 判断当前路由地址是否需要登录权限 if(to.meta.requireAuth) { if(token) { next() }else { // 未登录授权 V3Popup({ content: '还未登录授权！', position: 'top', time: 2, onEnd: () => { next({ path: '/login' }) } }) } }else { next() }})Vue3登录表单实现 vue3.0中实现表单登录验证功能。 <!-- //登录模板 --><template> <p> <p class="vui__scrollview vui__scrollview-lgreg flex1"> <p class="nt__lgregPanel"><p class="lgreg-header"><p class="slogan"><img class="logo" src="@assets/v3-logo.png" /><p class="text ff-st">欢迎使用Vue3-Chatroom</p></p><p class="forms"><form @submit.prevent="handleSubmit"><p class="item flexbox flex_alignc"><input class="iptxt flex1" type="text" v-model="formObj.tel" placeholder="请输入手机号" maxlength="11" /></p><p class="item flexbox flex_alignc"><input class="iptxt flex1" type="password" v-model="formObj.pwd" placeholder="请输入密码" /></p><p class="item btns"><button class="vui__btn vui__btn-primary" type="submit">登录</button></p><p class="item lgreg-lk"><router-link class="navigator" to="#">忘记密码</router-link><router-link class="navigator" to="/register">注册账号</router-link></p></form></p></p></p> </p> </p></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: `<p style='text-align:left;'>${content}</p>`, popupStyle: 'background:#ff4848;border-radius:1px;color:#fff;', position: 'bottom', time: 2 }) } 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); v3popup({ content: '恭喜，登录成功！', time: 2, shadeClose: false, onEnd() { ctx.$router.push('/') } }) } } return { formObj, handleSubmit } }}</script>项目中所有的模板页及功能均是采用Vue3语法实现，全面拥抱Composition API语法。 ok，基于Vue3开发聊天功能，暂时就分享到这里。感谢大家的阅读~~