img-preview-panel v2.1.1

add a package

1. lib文件夹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

2. lib文件夹xxxx.js

<template>
  <div>
      <img :src="imgData[0]" alt="">
  </div>
</template>

<script>
  export default {
    name: 'vue-picture-viewer',
    props: {
      imgData: {
        type: Array,
        default: ''
      }
    },
    data () {
      return {
       
      }
    }
  }
</script>   

3.webpack.config.js

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
},

4.package.json

"version": "2.1.0",
"author": "hunter.l <751754949@qq.com>",
"license": "MIT",
"private": false,
"main": "dist/vue-picture-viewer.js",

5.npm run build/npm publish

6.main.js

import xxx from "xxxxx";
Vue.use(xxx)

7.index.vue

<xxx></xxx>