vue封装插件并发布到npm

@【vue自定义插件&上传npm】

写插件

在项目根目录新建glugins文件夹,目录如下

• glugins
  • lib
    • index.js
  • index.js

• glugins>lib>index.js

const Plugins = {
    //Vue.js 的插件应该暴露一个 install 方法。这个方法的第一个参数是 Vue 构造器，第二个参数是一个可选的选项对象
    install(Vue,option){
        // 添加全局方法或 property
        Vue.myGlobalMethod = function () {
            // 逻辑...
        }
        //添加全局资源
        Vue.directive('rotate',{
            bind:function(){
            //只调用一次，指令第一次绑定到元素时调用
            //我这里让元素旋转并改变字体颜色
            let [el,...other] = arguments
            el.onmousemove = function(){
                el.style.color = 'pink'
                el.style.display = 'inline-block'
                el.style.transition = 'all 1s'
                el.style.transform = 'rotateZ(360deg)'
            }
            el.onmouseleave = function(){
                console.log("onmouseleave")
                el.style.color = '#000'
                el.style.transform = 'rotateZ(0deg)'
            }
            },
            inserted: function () {
            //被绑定元素插入父节点时调用
            },
            update: function () {
            //所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。
            //但是你可以通过比较更新前后的值来忽略不必要的模板更新 。
            },
            componentUpdated: function () {
            //指令所在组件的 VNode 及其子 VNode 全部更新后调用。
            },
            unbind: function () {
            //只调用一次，指令与元素解绑时调用。
            }
        
        })

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

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

• glugins> index.js

//module.exports 提供了暴露接口的方法
module.exports = require('./lib')

在main.js 引入

import rotate from '../plugins/index.js'
Vue.use(rotate);

页面使用

<template>
  <div>
  	 <img  v-rotate src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3036316726,676055399&fm=26&gp=0.jpg" alt="">
  </div>
</template>

发布到npm

首先你的有一个npm账号，前往注册

打开glugins所在目录cmd窗口

执行命令：npm init -y 。 初始化插件，生成配置文件package.json 。

{
  "name": "@haoyan/plugintext",  //名字，注意文件的name不要重名
  "version": "1.0.0",  //版本
  "description": "",   //描述
  "main": "index.js",
  "directories": {
    "lib": "lib"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],  //关键词
  "author": "",    //作者
  "license": "ISC"
}

接下来是登录发布

命令：npm login
然后依次输入用户名 密码 email
命令：npm publish

使用： npm下载，main.js 引入，页面使用。

//上传npm的在定义插件
import rotate from 'lihao2'
Vue.use(rotate);