基于vite2+vue3.x实战小视频/直播聊天|vue3.0仿抖音短视频

项目介绍

Vue3DouYin 基于vite2+vue3.0+vant3+v3popup等技术开发的一款移动端仿抖音/快手App界面短视频实例项目。实现了滑动切换视频、暂停/进度条展示、点赞/评论/聊天、弹幕/送礼物/红包等功能。

技术栈

编码+技术：vscode + vite2/vue3.0/vue-router/vuex4
UI组件库：vant3 (有赞移动端vue3组件库)
弹层组件：v3popup（移动端vue3弹框组件）
字体图标：阿里iconfont图标
导航条+底部栏：自定义顶部navbar/tabbar标签栏组件

项目目录结构

vue3自定义手机端弹框组件

v3popup一款使用vue3开发的mobile端自定义弹框组件。完美的融入到项目中各个弹窗场景。

由于之前写过一篇这方面的分享，大家感兴趣的话可以去看下。
vue3.0系列之自定义mobile版弹出层组件|vue3移动端弹框

vite2项目配置

/**
 * Vite2项目配置
 */

import vue from '@vitejs/plugin-vue'

import path from 'path'

/**
 * @type {import('vite').UserConfig}
 */
export default {
  plugins: [vue()],

  build: {
    // 基本目录
    // base: '/',

    /**
     * 输出文件目录
     * @default dist（默认）
     */
    // outDir: 'target',
  },

  // 环境配置
  server: {
    // 自定义接口
    port: 3000,

    // 是否自动浏览器打开
    open: false,

    // 是否开启https
    https: false,

    // 服务端渲染
    ssr: false,

    // 代理配置
    proxy: {
        // ...
    }
  },

  // 设置路径别名
  alias: {
    '@': path.resolve(__dirname, './src'),
    '@components': path.resolve(__dirname, './src/components'),
    '@views': path.resolve(__dirname, './src/views')
  }
}

vue3主入口main.js配置

引入一些路由/状态管理，公共组件及样式。

/**
 * vue3.0主页面配置
 */

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

// 引入Router及Vuex
import router from './router'
import store from './store'

// 引入公用组件
import Plugins from './plugins'

// 引入Js
import '@/assets/js/fontSize'

// 引入公用样式
import '@/assets/fonts/iconfont.css'
import '@/assets/css/reset.css'
import '@/assets/css/layout.css'

const app = createApp(App)

app.use(router)
app.use(store)
app.use(Plugins)

app.mount('#app')

vue3小视频/直播功能

使用有赞vue3组件库中的swipe组件实现小视频上下滑动轮播效果。

直播页面送礼物/充值等弹窗都是使用v3popup组件实现。



    
        
            
            赠送礼物
             0 
        
        
            
                
                    ![](item.giftPic)
                    {{item.giftLabel}}
                     {{item.giftCoins}}
                
            
        
    




    
        
            
            选择充值金额
             0
        
        
            
                
                     {{item.gtcoins}}
                    售价{{item.gtmoney}}元

ok，基于vue3+vite2开发短视频/直播实例就暂时分享这么多，感谢大家的支持！

最后附上一个Vue3+ElementPlus桌面web端聊天实例
vue3.x仿制微信/微博web版聊天室