基于vue3+vant3.x聊天实战|vue3.0仿微信聊天模板|vue3实例开发

2021年随着尤大相继推出的vue3.x和vite2构建工具的稳定版，让vue.js再一次成为开发者热捧的前端框架。支持国产的崛起！

基于vue3全家桶技术vue3.x+vuex4+vue-router4 及 vant3+v3popup 构架开发的仿微信mobile端界面聊天实例[Vue3Chat项目]。

vue3-chat 实现图文消息、图片/视频预览、网址查看、红包/朋友圈等功能。

• 框架技术：vscode编码 + vue3.x/vue-router@4+vuex4
• 组件库：vant3.x (有赞移动端 vue3.0 组件库)
• 弹框组件：v3-popup （基于 vue3 弹层组件）
• 字体图标：阿里 iconfont 字体图标库
• 自定义顶部 Navbar+底部 Tabbar

整个项目均是采用vue3.x全新语法编写开发。

项目整体布局分为顶部导航+内容区+底部tab标签栏。

项目中使用到的弹出框功能，是使用vue3.x自定义组件实现。

V3Popup 基于vue3.x实现的移动端弹出框组件，集合msg、alert、dialog、actionSheet、toast等多种效果。支持**20+**种自定义参数配置。

vue.config.js对项目进行一些基础配置，可以配置一些路径alias别名。

const path = require('path')

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

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

    // assetsDir: '',

    // 环境配置
    devServer: {
 // host: 'localhost',
 // port: 8080,
 // 是否开启https
 https: false,
 // 编译完是否打开网页
 open: false,
 
 // 代理配置
 // proxy: {
 //     '^/api': {
 //  target: '',
 //  ws: true,
 //  changeOrigin: true
 //     },
 //     '^/foo': {
 //  target: ''
 //     }
 // }
    },

    // 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'))
    }
}

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