基于Vue3.x+Vant3高仿抖音|火山APP小视频|直播

​随着抖音再一次获得2021辛丑牛年春晚独家红包合作赞助商。短视频/直播即将又再一次刷爆网络，成为新一代中国人的娱乐方式。

基于vite2搭建的vue3短视频+直播实例项目Vue3_Douyin，使用了Vue3.0.5+Vuex+VueRouter+Vant3+V3Popup等技术来构建开发。

支持滑动切换视频/直播、点赞/评论、聊天/弹幕/送礼物/红包等功能。

• 构建工具：vite.js
• vue3全家桶：vue3.0.5+vue-router@4+vuex4
• 组件库：vant3 (有赞移动端vue3.0组件库)
• 弹层组件：v3popup（移动端vue3弹框组件）
• 字体图标：阿里iconfont图标
• 导航栏/标签栏：自定义顶部Navbar+底部Tabbar组件

这个项目基于vue3最新语法来编码开发，遵循vue3标准式语法结构。

大家看到的所有弹窗应用场景，均是基于vue3开发的自定义组件v3popup来实现功能。

之前有过一些分享，这里就不介绍了。感兴趣的可以去看看历史文章。

import vue from '@vitejs/plugin-vue'

import path from 'path'


export default {
  plugins: [vue()],

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

    
    // outDir: 'target',
  },

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

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

    // 是否开启https
    https: false,

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

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

使用vite.js构建的项目都会有一个配置文件，进行一些简单的项目环境及路径配置。

为了使得项目结构更加清晰，新建一个plugings.js页面用来引入一些常用的公共插件。

// 引入Vant3.x组件库
import Vant from 'vant'
import 'vant/lib/index.css'

// 引入Vue3.x移动端弹层组件
import V3Popup from '@components/v3popup'

import NavBar from '@components/navBar.vue'
import TabBar from '@components/tabBar.vue'

import Utils from './utils'
import Storage from './storage'

const Plugins = (app) => {
    app.use(Vant)
    app.use(V3Popup)

    // 注册公用组件
    app.component('navbar', NavBar)
    app.component('tabbar', TabBar)

    app.provide('utils', Utils)
    app.provide('storage', Storage)
}

项目中的短视频和直播模板有一些地方是公共的，都是使用了swipe组件来滑动切换效果。首页小视频可以上下左右滑动，直播页面上下滑动。

当视频列表多的时候，设置lazy-render属性，会延迟加载下一页视频数据，大大的提升滑动性能。

如上图：送礼物|充值弹窗是使用v3popup组件的自定义插槽来实现功能。

ending，运用vue3.x+vant3开发火山/抖音短视频|直播项目就分享到这里。
后面还会分享一些vue3.0实战案例，多谢大家的支持哈~~