項目地點: vue-picture-viewer
先來看下Demo
關於開闢Vue插件的幾種體式格局 (細緻請移步官網)Vue官網
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
import vuePictureViewer from './vue-picture-viewer'
const pictureviewer = {
install (Vue, options) {
Vue.component(vuePictureViewer.name, vuePictureViewer)
}
}
if (typeof window !== 'undefined' && window.Vue) { // 這段代碼很主要
window.Vue.use(pictureviewer)
}
export default pictureviewer
- 3.編寫vue-picture-viewer.vue也挺簡樸(細緻能夠去看源碼)
- 4.怎樣運用(main.js)
import vuePictureViewer from './lib/index.js'
Vue.use(vuePictureViewer)
App.vue
<template>
<div id="app">
<vue-picture-viewer :imgData="imgUrl" :switch="true" v-if="imgUrl"></vue-picture-viewer>
</div>
</template>
<script>
export default {
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", 這個超等主要 決議了你 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.這個插件實在很簡樸的,主如果要把開闢到宣布都來了一遍,照樣有收成的
末了總結
插件另有一點題目,放大減少的操縱也沒有加動畫,不兼容挪動端,看起來比較僵硬!第二版的時刻給加上動畫兼容一下挪動端!!!
(迎接交換,提Issues! 求Star)