README
troila-meet-sdk
https://www.npmjs.com/package/troila-meet-sdk
下载插件
yarn add trolia-meet-sdk
启动服务
yarn serve
打包配置文件
vue.config.js
ts转js命令
yarn tojs 或 tsc --p tsconfig.pro.json
发包流程
1.上传前后需先执行src目录下ts文件转js命令
#: (ts转js无法将除(.ts, .tsx, js)以外的文件拷贝至lib文件夹 (.vue, .json)及相关静态资源需手动拷贝至lib文件夹下)
2.修改package.json中版本号,版本管理,修改version版本号,基本原则如下:
> 主版本号(Major):当你做了不兼容的API修改
> 次版本号(Minor):当你做了向下兼容的功能性新增
> 修订号(Patch):当你做了向下兼容的问题修正
4.发布npm 执行npm publish
目录说明及开发注意事项:
examples # 本地引用插件调试相关文件
public # 本地调试静态资源文件
src # 开发插件相关代码
# src目录下避免使用@/写法
# vue内需使用js写法,ts写法可写在.ts文件
# 除插件外引用资源需使用相对路径写法
# 插件的所有静态资源需放在该目录下assets文件夹内
# index.ts抛出所有组件
# init.ts设置初始加载方法及插件全局变量
# views内为页面级组件
ssl # https证书文件
lib # 上传至npm文件
.env.* # 环境变量配置
组件中不可使用环境变量;
css规范:
以flex布局为主,万不得已用position;
在flex布局中自适应部分里,写过长或过高的固定长宽,可能会导致页面布局混乱;
每个页面有自己的类和scoped;
反复用到的配色变量在 assets/style/var.scss,直接添加或引用,不要额外单独声明;
element有多种按钮分类,用不同类的按钮修改成需要的样式,或者使用class,不要直接修改el-button基类;
组件样式的重置统一写在assets/style/element-reset.scss下 ;
(其他注意事项请添加...)
js规范:
非常规处理逻辑要加注释;
尽量使用es6语法;
尽量封装可复用组件;
尽量不要使用watch深度监听;
定时器使用完毕后要手动清除;
不要在pexrtc.js编写关于有业务需求的代码(如必须使用,可添加回调函数,在call类使用即可)
项目中使用了ts,在引入ts文件时不要加后缀;
整个example目录和项目是模拟了引用组件的场景,实际他人安装使用时,是没有环境变量,入口文件等等的,引用的组件在src下;
他人使用依赖时,需引入src/index.ts 文件,该文件抛出了主组件和各种api;
插件使用方法见home.vue,除了需要引入组件外,还需调用init方法传入必要参数;
api是请求库,utils是方法库;(创建公共方法时先看一下库里是否存在)公共方法主要为utils => index.ts/function.ts
项目中没有vuex,全局变量可以储存在global中,使用请引入global,可以监听变量的改变;
项目中使用eventBus做更复杂的全局变量存储和监听;
使用provide和inject进行多层嵌套组件传值;
写处理逻辑时性能优先,比如,不用传统的遍历,使用es6 find findIndex filter map 等等;
使用npm安装外部插件时使用 --save
使用说明:
1.本组件依赖 element-ui, sass, node-sass, sass-loader, 请确保项目中有正确安装
2.在项目的入口文件main.js中引入样式
import 'troila-meet-sdk/lib/assets/style/index.scss'
3.项目的index入口中除了抛出了vue组件以外,还抛出了相应的方法:
init(初始化)等等,详情请查看源码。。