封装第一个vue组件,发布到npm

视频会议

在多个项目多处地方使用到了读取摄像头拍照的功能,就想着封了一个组件,方便使用

1、创建项目

vue init webpack-simple wwp-read-face

2、修改几个地方

没有这几个文件的的话 先 npm init 自动生成一下

package.json

"private": false,
"main": "dist/wwp-read-face.js",

webpack.config.js

entry: process.env.NODE_ENV == 'development' ? './src/main.js' : './src/index.js',
output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    filename: 'wwp-read-face.js',//输出文件名
    library: 'wwp-read-face', // 指定的就是你使用require时的模块名
    libraryTarget: 'umd', // 指定输出格式
    umdNamedDefine: true // 会对 UMD 的构建过程中的 AMD 模块进行命名。否则就使用匿名的 define
},

3、写组件

在src文件夹下新增 ReadFace.vue,并编写代码

4,增加入口文件

在 src 文件夹下新增 index.js,就是 webpack.config.js 中 entry 配置的名称

import ReadFace from './ReadFace'
export default ReadFace;

5、发布到npm

发布就几个命令

npm login //登录
npm publish //发布
//如果需要修改版本
//1.0.0
npm version patch    // 1.0.1
npm version minor    // 1.1.0
npm version major    // 2.0.0

使用这个组件

npm install wwp-read-face

参数

  1. autoStart //是否在组件初始化完成时候就开启录像
  2. width //宽
  3. height //高
  4. frame //帧数 setTimeout(fn,1000/frame) 为0时不自动截屏
  5. callback //自动截屏时的回调 返回 base64
  6. error //打开摄像头发生错误时

方法

  1. start //开始录制
  2. stop //停止录制
  3. toBase64 //截屏

说点什么

avatar
  Subscribe  
Notify of