基于Vue2x的图片预览插件的示例代码

2020-06-14 06:30:05易采站长站整理

output: {
path: path.resolve(__dirname, './dist'),
publicPath: '/dist/',
// filename: 'build.js',
filename: 'vue-picture-viewer.js',
library: 'pictureViewer',
libraryTarget: 'umd',
umdNamedDefine: true
},

6.打包成功,配置package.json


"license": "MIT", // 许可证
"private": false, // 默认是true 私人的 需要改为false, 不然发布不成功!
"main": "dist/vue-picture-viewer.js", 这个超级重要 决定了你 import xxx from “vue-picture-viewer” 它默认就会去找 dist下的vue-picture-viewer 文件
"repository": {
"type": "git",
"url": "https://github.com/sangcz/vue-picture-viewer" // github项目地址
},

7.一切Ok准备发布!

8.首先注册好npm后 添加用户


npm adduser
Username: your name
Password: your password
Email: yourmail

// 查看一下登录的是不是你自己
npm whoami

// 发布
npm publish

// 这里我遇到一个问题,发布失败了!

什么原因呢?

9.解决了上面的问题,发布成功了!开心😊

10.记得写一下README.md(比如像我的一样,写的越详细越好!)

11.这个插件其实很简单的,主要是要把开发到发布都来了一遍,还是有收获的

最后总结

插件还有一点问题,放大缩小的操作也没有加动画,不兼容移动端,看起来比较生硬!第二版的时候给加上动画兼容一下移动端!!!