jf-rtc-layer v0.1.2

工程承接业务范围说明

a、承接关于所有rtc推拉流, 例如座位席、老师独立推拉流窗口、个人推拉流专注模式卡片
b、承接老师和学生窗口，窗口分6层
    1)、动效层 [加积分、点赞、举手]
    2)、标签层 [连胜标签]
    3)、状态层 [麦克状态、离线状态等]
    4)、头像层 [头像]
    5)、视频层 [rtc流]

技术栈

vue3 + ts

工程目录说明

1、examples 作为工程的示例页面开发目录 相当于vue-cli3创建后的src目录
2、packages 作为对外导出的模块包开发目录，例如 <seat-group></seat-group>

开发自测流程

1、在packages 新增模块目录, 导出组件
2、在examples 示例页面 import 新开发的组件
3、yarn serve

在其他工程集成

通过yalc插件集成进行本地打包

安装

NPM: npm i yalc -g Yarn: yarn global add yalc

配置package.json文件

1、"name": "zgj-rtc-layer" // npm包名
2、"version": "0.1.1", // npm包版本号
3、"private": false, // 修改为false才允许发包
4、"main": "packages/index.ts", // 入口文件

执行yalc本地发包命令

yalc publish => 执行结果如下: zgj-rtc-layer@0.1.1 published in store.

打开需要依赖的工程 执行添加依赖命令

yalc add zgj-rtc-layer => 执行结果如下: Package zgj-rtc-layer@0.1.1 added ==> E:\stu-worker-space\pc-stu-client-ts\node_modules\zgj-rtc-layer

在当前工程的node_modules目录同级会生产一个新目录.yalc

.yalc\zgj-rtc-layer

在当前工程的package.json文件会生产依赖项配置

"zgj-rtc-layer": "file:.yalc/zgj-rtc-layer"

在需要应用的页面或者模块直接导入组件

import { RtcSeatGroup } from 'zgj-rtc-layer';

通过npm安装包的方式进行导入

注册npm账号

https://www.npmjs.com/

登录通过cmd命令窗口登录

npm login

配置package.json文件

1、"name": "zgj-rtc-layer" // npm包名
2、"version": "0.1.1", // npm包版本号
3、"private": false, // 修改为false才允许发包
4、  "main": "lib/index.umd.min.js", // 入口文件
5、"scripts": {
        "lib": "vue-cli-service build --target lib --name index --dest lib packages/index.ts"
    },

执行打包命令

yarn lib

执行上传命令

npm publish

在自己的npm仓库下查看

https://www.npmjs.com/settings/zgjlhnwj/packages

打开需要依赖的工程 执行添加依赖命令

yarn add zgj-rtc-layer

在当前工程的package.json文件会生产依赖项配置

"zgj-rtc-layer": "^0.1.1",

在需要应用的页面或者模块直接导入组件

import { RtcSeatGroup } from 'zgj-rtc-layer';