使用vue做自定义插件并发布到npm

第一步

先注册一个npm账号 点击前往注册

第二步

本地开发

初始化本地项目

新建一个js文件配置插件的入口文件

import testPanel from '路径'
import testToast from '路径'
let test = { }
test.install = function (Vue,options){
  Vue.prototype.$myMethod = function(arr){
    if(arr.length < 0){
    return false  
  }else{
    arr = arr.join(‘链接’)
    return arr  
  }
 }
Vue.componetnt(testPanel.name,testPanel) //name组件名的name
Vue.componetnt(testToast.name,testToast) //name组件名的name

}
export default test 

自定义组件

<template>
  <div>
    <div class="number-panel">
      <p v-show="checkedNumber.length>0" class="number-show">{{checkedNumber}}</p>
      <p v-show="!checkedNumber" class="number-show">  </p>
      <ul>
        <li @click="clickThisNumber($event)" v-for="index in 9" :key="index">{{index}}</li>
        <li @click="clickThisNumber($event)">0</li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: 'test-panel',   // 这里需要注意下，我们是采用的全局注入我们的组件，所以在后面因为我们的组件后，会直接使用这个命名的标签
  data () {
    return {
      checkedNumber: ''
    }
  },
  components: {
  },
  methods: {
    clickThisNumber (e) {
      this.checkedNumber = this.checkedNumber.concat(e.currentTarget.innerHTML)
    }
  }
}
</script>

<style>
  .number-show {
    height: 20px;
  }
  .number-panel ul {
    padding: 0;
  }
  .number-panel ul li{
    display: inline-block;
    width: 28%;
    height: 50px;
    line-height: 50px;
    margin-top: 20px;
    background: #ddd;
    border-radius: 8px;
    margin-right: 10px;
  }
  .number-panel ul li input {
    display: none;
  }
</style>

组件效果图

自定义组件

<template>
  <div>
    <div class="toast"  ref='toastPosition' :class="{active: toastHidden}">
      <div class="toast-warpper">
         {{text}}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'test-toast',
  data () {
    return {
      text: '',
      toastHidden: false
    }
  },
  created () {
    // this.toastPlugin()
  },
  components: {
  },
  methods: {
    toastPlugin (msg, time) {
      this.text = msg
      this.toastHidden = true
      setTimeout(() => {
        this.toastHidden = false
      }, time)
    }
  }
}
</script>

<style>
  .toast {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 0px;
    min-height: 0px;
    text-align: center;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 5px;
    color: #fff;
    transition: all 0.5s;
    z-index: -1;
    opacity: 0;
  }
  .toast.active {
    width: 150px;
    min-height: 25px;
    opacity: 1;
    z-index: 11;
  }
</style>

组件效果图

本地测试

//全局引入 main.js
import 名字 from '入口文件.js'
//使用
Vue.use(名字) 

打包

发布到npm

本地添加npm用户

npm adduser
username:
password:

查看用户npm whoami

登录npm

npm login

发布

npm publish