#长文创作激励计划#

经过半个月爆肝式潜心研发，又一款原创新作vite-vue3-wechat网页聊天室正式完结啦。

vite5-wechat使用最新前端技术vite5.x+vue3+pinia+element-plus构建开发。包含了聊天、通讯录、朋友圈、短视频、我的等模块。

使用技术

"@amap/amap-jsapi-loader": "^1.0.1",
"element-plus": "^2.7.5",
"pinia": "^2.1.7",
"pinia-plugin-persistedstate": "^3.2.1",
"sass": "^1.77.4",
"swiper": "^11.1.4",
"ve-plus": "^0.3.10",
"vue": "^3.4.21",
"vue-router": "^4.3.3",
"wangeditor": "^4.7.15"

支持动态换肤桌面背景、最大化、锁屏等功能。

项目结构目录

整个项目使用vite5.x构建项目模板，采用vue3 setup语法编码开发。

main.js配置

import { createApp } from 'vue'
import './style.scss'
import App from './App.vue'

// 引入组件库
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import VEPlus from 've-plus'
import 've-plus/dist/ve-plus.css'

// 引入路由/状态管理
import Router from './router'
import Pinia from './pinia'

const app = createApp(App)

app
.use(ElementPlus)
.use(VEPlus)
.use(Router)
.use(Pinia)
.mount('#app')

vue3实现上滑数字解锁

登录验证没有使用传统的文本框模式，使用数字密码解锁方式。

<template>
  <div class="uv3__launch">
    <div v-if="splashScreen" class="uv3__launch-splash" @mousedown="handleTouchStart" @mousemove="handleTouchUpdate" @mouseup="handleTouchEnd">
      <div class="uv3__launch-splashwrap flexbox flex-col flex1">
        ...
      </div>
    </div>
    <div v-else class="uv3__launch-keyboard flexbox flex-col" :class="{'closed': authPassed}">
      <div class="uv3__launch-pwdwrap">
        <div class="text">密码解锁</div>
        <div class="circle flexbox">
          <div v-for="(num, index) in passwordArr" :key="index" class="dot" :class="{'active': num <= pwdValue.length}"></div>
        </div>
      </div>
      <div class="uv3__launch-numwrap">
        <div v-for="(item, index) in keyNumbers" :key="index" class="numbox flex-c" @click="handleClickNum(item.letter)">
          <div class="num">{{item.letter}}</div>
        </div>
      </div>
      <div class="foot flexbox">
        <Button round icon="ve-icon-clean" @click="handleClear">清空</Button>
        <Button type="danger" v-if="pwdValue" round icon="ve-icon-backspace" @click="handleDel">删除</Button>
        <Button v-else round icon="ve-icon-rollback" @click="handleBack">返回</Button>
      </div>
    </div>
  </div>
</template>

// 触摸事件(开始/更新)
const handleTouchStart = (e) => {
	touchY.value = e.clientY
	touchable.value = true
}
const handleTouchUpdate = (e) => {
	let swipeY = touchY.value - e.clientY
	if(touchable.value && swipeY > 100) {
		splashScreen.value = false
		touchable.value = false
	}
}
const handleTouchEnd = (e) => {
	touchY.value = 0
	touchable.value = false
}

vue3聊天公共模板

整体分为左侧菜单栏+侧边栏+内容主体区三大模块。

<template>
  <div class="vu__container" :class="{'fullscreen': appstate.config.fullscreen}" :style="{'--themeSkin': appstate.config.skin}">
    <div class="vu__layout">
      <div class="vu__layout-body flex1 flexbox">
        <!-- 菜单栏 -->
        <slot v-if="!route?.meta?.hideMenuBar" name="menubar">
          <MenuBar />
        </slot>

        <!-- 侧边栏 -->
        <div v-if="route?.meta?.showSideBar" class="vu__layout-sidebar flexbox" :class="{'hidden': appstate.config.collapsed}">
          <aside class="vu__layout-sidebar__body flexbox flex-col">
            <slot name="sidebar">
              <SideBar />
            </slot>

            <!-- 折叠按钮 -->
            <Collapse />
          </aside>
        </div>

        <!-- 主内容区 -->
        <div class="vu__layout-main flex1 flexbox flex-col">
          <Winbtn v-if="!route?.meta?.hideWinBar" />
          <router-view v-slot="{ Component, route }">
            <keep-alive>
              <component :is="Component" :key="route.path" />
            </keep-alive>
          </router-view>
        </div>
      </div>
    </div>
  </div>
</template>

其中左侧菜单栏/侧边栏，可以通过路由meta来配置是否显示。

/**
 * meta配置
 * @param meta.requireAuth 需登录验证页面
 * @param meta.hideWinBar 隐藏右上角按钮组
 * @param meta.hideMenuBar 隐藏菜单栏
 * @param meta.showSideBar 显示侧边栏
 * @param meta.canGoBack 是否可回退上一页
 */

vue-router路由配置

vite支持批量引入路由配置文件。

import { createRouter, createWebHashHistory } from 'vue-router'
import { authState } from '@/pinia/modules/auth'

import Layout from '@/layouts/index.vue'

// 批量导入路由
const modules = import.meta.glob('./modules/*.js', { eager: true })
const patchRouters = Object.keys(modules).map(key => modules[key].default).flat()

/**
 * meta配置
 * @param meta.requireAuth 需登录验证页面
 * @param meta.hideWinBar 隐藏右上角按钮组
 * @param meta.hideMenuBar 隐藏菜单栏
 * @param meta.showSideBar 显示侧边栏
 * @param meta.canGoBack 是否可回退上一页
 */
const routes = [
  ...patchRouters,
  // 错误模块
  {
    path: '/:pathMatch(.*)*',
    redirect: '/404',
    component: Layout,
    meta: {
      title: '404error',
      hideMenuBar: true,
      hideWinBar: true,
    },
    children: [
      {
        path: '404',
        component: () => import('@/views/error/404.vue'),
      }
    ]
  },
]

const router = createRouter({
  history: createWebHashHistory(),
  routes,
})

// 全局路由钩子拦截
router.beforeEach((to, from) => {
  const authstate = authState()
  // 登录验证
  if(to?.meta?.requireAuth && !authstate.authorization) {
    console.log('你还未登录!')
    return {
      path: '/login'
    }
  }
})

router.afterEach((to, from) => {
  // 阻止浏览器回退
  if(to?.meta?.canGoBack == false && from.path != null) {
    history.pushState(history.state, '', document.URL)
  }
})

router.onError(error => {
  console.warn('[Router Error]', error)
})

pinia状态管理配置

import { createPinia } from 'pinia'
// 引入pinia持久化存储
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'

const pinia = createPinia()
pinia.use(piniaPluginPersistedstate)

export default pinia

整个项目一顿开发下来，涉及到的知识点还是蛮多的，今天就先分享到这里。

目前该项目已经同步到我的原创作品集，感兴趣的可以去看看。

https://gf.bilibili.com/item/detail/1106226011