前端如何发布npm包以及开发vue插件教程

第一步

注册npm账号，附上官网链接npm官网

第二步

初始化项目，执行如下指令：

npm init

根据命令行提示填写对应信息，不需要则直接回车，最后会根据你填写的信息生成对应的package.json文件。

第三步

在package.json同级目录下新建index.js文件。代码如下：

export default {
    install: (Vue, options) => {
        // 1. 添加全局资源(自定义指令)
        Vue.directive('my-directive', {
            bind (el, binding, vnode, oldVnode) {
                // 逻辑...
            }
        })
        // 2. 注入组件选项
        Vue.mixin({
        })
        //3.添加实例方法或者属性
        Vue.prototype.testFn = function(){
          console.log('测试方法被调用了')
            }
    }
}

第四步 绑定npm账号

在终端输入如下指令按提示输入npm账号、密码以及邮箱

npm addUser

如果出现403错误，可能是npm配置了淘宝镜像的原因，重新配置一下npm官网地址即可

npm config set registry https://registry.npm.taobao.org/

第五步 登录npm账号

npm login

按照提示输入npm账号、密码以及邮箱验证码

第六步 发布

npm publish

安装验证是否可用

npm i 插件名

在项目中使用

import 自定义名称 from '插件名'
Vue.use(自定义名称)

随便找一个项目中的.vue文件，调用插件中的方法testFn，因为直接挂载到了Vue的原型上，所以可以直接通过如下代码片段调用，成功调用就是发布插件成功了

this.testFn()

以上就是全部流程，制作不易，觉得有用的可以点赞支持一下作者