【Vue】使用vue封装插件并发布到NPM

前言

多个平台都用到的一些公共的功能，又不想用git的子模块，就有了开发成npm插件的想法

放个效果图

开始动手

由于需求很明确，就是作一个公共的回顶部的插件，因此就使用了简洁版的webpack配置建立工程

vue init webpack-simple x-backtotop

为何用简洁版，以及简洁版和完整版有什么区别， 能够去这篇文章看看

1. 运行脚本后会让配置一些基础信息，直接确认就行
   
2. 看看初始化后的目录结构

3. 新建一个lib文件夹，存放咱们的插件

4. index.js

   import toTop from './x-backToTop.vue'
   
   const comment = {
     install: function (Vue) {
       Vue.component(toTop.name, toTop)
     }
   }
   // global 状况下 自动安装
   if (typeof window !== 'undefined' && window.Vue) {
     window.Vue.use(comment)
   }
   
   export default comment

   Tips：
   此处须要注意的是 install。 Vue的插件必须提供一个公开方法 install，该方法会在你使用该插件，也就是 Vue.use(yourPlugin)时被调用。这样也就给 Vue全局注入了你的全部的组件。

5. x-backtotop.vue

   <template>
     <div class="backToTop" :style="'z-index: ' + zIndex" @click="backToTop" v-show="bVisible">
       <div class="icon"></div>
     </div>
   </template>
   
   <script>
     export default {
       name: 'back-to-top',
       props: {
         zIndex: {
           type: Number,
           default: 9999
         },
         triggerHeight: {
           type: Number
         },
         smooth: {
           type: Boolean,
           default: true
         },
         scrollInterval: {
           type: Number,
           default: 10
         },
         scrollHeight: {
           type: Number,
           default: 100
         }
       },
       data () {
         return {
           interval: null, // 计时器
           bVisible: false // 按钮显示状态
         }
       },
       methods: {
         resetToTop () {
           window.pageYOffset = 0;
           document.documentElement.scrollTop = 0;
           document.body.scrollTop = 0;
         },
         buttonStatus () {
           var currentHeight = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
           let browserHeight = this.triggerHeight || (window.outerHeight / 4);
           this.bVisible = currentHeight > browserHeight;
         },
         backToTop () {
           if (this.smooth) {
             var that = this,
               _interval = this.scrollInterval,
               _height = this.scrollHeight;
             // 间隔{_interval}移动{_height}
             this.interval = setInterval(function () {
               that.smoothScroll(_height)
             }, _interval)
           } else {
             this.resetToTop();
           }
         },
         smoothScroll (y) {
           if (window.pageYOffset > 0) {
             window.pageYOffset = window.pageYOffset - y;
           }
           if (document.documentElement.scrollTop > 0) {
             document.documentElement.scrollTop = document.documentElement.scrollTop - y;
           }
           if (document.body.scrollTop > 0) {
             document.body.scrollTop = document.body.scrollTop - y;
           }
           var positionNow = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
           if (positionNow <= 0) {
             clearInterval(this.interval);
             // 清除计时器后，所有重置为零，预防回滚为负数时，再也不显示的bug
             this.resetToTop();
           }
         }
       },
       created () {
         window.addEventListener('scroll', this.buttonStatus)
       },
       destroyed () {
         window.removeEventListener('scroll', this.buttonStatus);
       }
     }
   </script>
   
   <style lang="scss" scoped>
     .backToTop {
       position: fixed;
       right: 100px;
       bottom: 150px;
       width: 40px;
       height: 40px;
       size: 40px;
       border-radius: 20px;
       cursor: pointer;
       transition: .3s;
       box-shadow: 0 0 6px rgba(0,0,0,.12);
       background-color: #FFF;
       overflow: hidden;
       .icon{
         position: absolute;
         margin: auto;
         left: 0;
         top: -8px;
         bottom: 0;
         right: 0;
         width: 0;
         height: 0;
         border-width: 8px;
         border-style: solid;
         border-color: transparent #0099CC transparent transparent;
         transform: rotate(90deg); /*顺时针旋转90°*/
       }
     }
     .backToTop:hover{
       box-shadow: 0 0 20px #000;
     }
   </style>

   这里须要注意的有几个点：
   1.这里使用的是addEventListener而不是window.onscroll方法，由于写成window.onscroll在离开当前界面的时候，还会触发一次这个监听，虽然没有影响，可是由于不清楚缘由，因此使用addEventListener方式
   2.使用平滑的移动到顶端，因为个人写法是每隔一段时间减小定高，因此会出现负数的状况，这个时候再怎么滚动，都不会再变动这个值，因此在回到顶部后，将数值重置为0
   3.这里使用的是v-show而不是v-if，具体区别能够查看下官方文档，简单来讲就是常常须要变动的建议用v-show

6. 插件自测试
   我这里是直接在App.vue中引用，效果图以下

7. 修改webpack.config.js，注意的就几个字段

8. 修改package.json
   

9. 发布到npm

   这里就不过多介绍怎么建立npm帐号了，在项目根路径下运行

   npm login

   填写用户名密码

   whoami

   确认是否登录成功，帐号是否正确

   npm publish

   最后进行发布就行

发布中可能遇到的问题

1. no_perms Private mode enable, only admin can publish this module
   缘由：由于镜像设置成淘宝镜像了，设置回来便可
   方案：npm config set registry http://registry.npmjs.org
2. npm publish failed put 500 unexpected status code 401
   缘由：通常是没有登陆
   方案：从新登录一次
3. npm ERR! you do not have permission to publish “your module name”. Are you logged in as the correct user?
   缘由：包名被占用
   方案：修改包名便可

发布后的一些修改

发布完成后，想要本身npm run dev，发现报错

缘由是由于index.html中没有修改资源路径
修改前

<script src="/dist/build.js"></script>

修改后

<script src="/dist/backToTop.js" type="text/javascript"></script>

参考文章

• vue组件篇（2）---封装组件并发布到npm
• 探索vue-cli的webpack和webpack-simple模板的development server实现差别

我的疑问

若是想将别人已经发布在npm上的插件，封装到本身插件内部使用，除了手动实现该功能，有别的什么更好的方案吗，但愿大佬解惑

写在最后

目前该插件已经发布到npm上了，欢迎你们使用

以上就是我将vue插件封装并发布到npm的总结，若有什么疑问欢迎评论留言。