「仿朋友圈程序」朋友圈怎么发程序
不得不说,最近不断捣鼓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开发聊天功能,暂时就分享到这里。感谢大家的阅读~~
声明:本站所有文章资源内容,如无特殊说明或标注,均为采集网络资源。如若本站内容侵犯了原著者的合法权益,可联系本站删除。