vue3.0全家桶-仿微信聊天+朋友圈|vue3+vuex4实战开发

随着vue3越来越稳定，需要使用vue3技术开发的项目也逐步立项了。今天给大家分享的是基于Vue3.0开发仿微信聊天实战项目[Vue3Wchat]。

• 框架技术：Vue.js 3.0
• 状态管理：Vuex4.x
• 页面路由：Vue-router4.x
• 组件库：vant3.0 (有赞 vue3 移动端组件库)
• 弹层组件：v3popup (基于 vue3 自定义弹窗)
• 字体图标：iconfont 字体图标库

项目中的弹框功能都是基于 vue3.0 开发的自定义组件实现。

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

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

import { createStore } from 'vuex'

export default createStore({
    state: {
 user: localStorage.getItem('user') || null,
 token: localStorage.getItem('token') || null
    },
    mutations: {
 SET_USER(state, data) {
     localStorage.setItem('user', data)
     state.user = data
 },
 SET_TOKEN(state, data) {
     localStorage.setItem('token', data)
     state.token = data
 },
 LOGOUT(state) {
     localStorage.removeItem('user')
     localStorage.removeItem('token')
     state.user = null
     state.token = null
 }
    },
    getters: {},
    actions: {}
})