前端怎样发布npm包以及开发vue插件教程

源代码 · 2024-9-26 22:29:48

第一步

注册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()以上就是全部流程，制作不易，以为有效的可以点赞支持一下作者

前端怎样发布npm包以及开发vue插件教程

所属分类: 问答交流

新帖推荐: 30日

推荐作品