使用Vue2x怎么实现一个图片预览插件

使用Vue2x怎么实现一个图片预览插件？针对这个问题，这篇文章详细介绍了相对应的分析和解答，希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。

MyPlugin.install=function(Vue,options){
//1.添加全局方法或属性
Vue.myGlobalMethod=function(){
//逻辑...
}

//2.添加全局资源
Vue.directive('my-directive',{
bind(el,binding,vnode,oldVnode){
//逻辑...
}
...
})

//3.注入组件
Vue.mixin({
created:function(){
//逻辑...
}
...
})

//4.添加实例方法
Vue.prototype.$myMethod=function(methodOptions){
//逻辑...
}
}

我采用第一种方式来编写这个插件

1.第一步创建项目

vue init webpack-simple youProjectName(你的项目名称)具体操作不在赘述

2.开始插件开发，编写index.js

importvuePictureViewerfrom'./vue-picture-viewer'
constpictureviewer={
install(Vue,options){
Vue.component(vuePictureViewer.name,vuePictureViewer)
}
}

if(typeofwindow!=='undefined'&&window.Vue){//这段代码很重要
window.Vue.use(pictureviewer)
}
exportdefaultpictureviewer

3.编写vue-picture-viewer.vue也挺简单(具体可以去看源码)

4.如何使用（main.js）

importvuePictureViewerfrom'./lib/index.js'
Vue.use(vuePictureViewer)

App.vue

<template>
<divid="app">
<vue-picture-viewer:imgData="imgUrl":switch="true"v-if="imgUrl"></vue-picture-viewer>
</div>
</template>

<script>
exportdefault{
name:'app',
data(){
return{
imgUrl:[{
url:'http://p8ny46w8x.bkt.clouddn.com/test1.jpg',
name:'test1.jpg'
},
{
url:'http://p8ny46w8x.bkt.clouddn.com/test2.jpg',
name:'test2.jpg'
},{
url:'http://p8ny46w8x.bkt.clouddn.com/test3.jpg',
name:'test3.jpg'
},
{
url:'http://p8ny46w8x.bkt.clouddn.com/test4.jpg',
name:'test4.jpg'
}]
}
}
}
</script>

<style>
*{
margin:0;
padding:0;
}
html,body{
width:100%;
height:100%;
}
</style>

5.打包前的配置webpack.config.js（很重要！！！）

module.exports={
entry:'./src/lib/index.js',
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",这个超级重要决定了你importxxxfrom“vue-picture-viewer”它默认就会去找dist下的vue-picture-viewer文件
"repository":{
"type":"git",
"url":"https://github.com/sangcz/vue-picture-viewer"//github项目地址
},

7.一切Ok准备发布！

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

npmadduser
Username:yourname
Password:yourpassword
Email:yourmail

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

//发布
npmpublish

//这里我遇到一个问题，发布失败了！

什么原因呢？

关于使用Vue2x怎么实现一个图片预览插件问题的解答就分享到这里了，希望以上内容可以对大家有一定的帮助，如果你还有很多疑惑没有解开，可以关注恰卡编程网行业资讯频道了解更多相关知识。