npm发布包(基于vue)

趁着周末,小卷一下!

今天npm下elementUI的时候,突发奇想自己开发一个包(里面装一些“实用”的功能)给自己用,网上查阅相关资料后终于成功发布了我的第一个包,赶紧来分享一波!一起来小卷一下!

1、去官网npm注册一个账号(用户名最好是英文,账号密码要牢记,后面要用到!

2、新建一个空文件夹项目,然后打开项目终端,执行npm init -y,然后安装vue,执行npm i vue vue-loader,vue的版本各取所需,安装完后package.json文件如图所示:

 name是你的包名,version是你包的版本号,main是你包的入口文件。

然后打开你的入口文件,没有就新建一个,名字必须跟上面main的名字一样,入口文件必须引入Vue(因为要注册组件)和导出一个有install属性的对象(install是函数,Vue.use()会自动调用install函数,所以这个是必须的),写完代码大致是这样:

import a from "./a.vue"

const plugs = {}

plugs.install = function(Vue){
	Vue.component('aaa',a)
	console.log('调用了插件')
}


export default plugs

之后就可以尽情的写组件了,在入口文件中引入,在install函数注册。

至此,你已经完成了一个非常简单的npm包,现在可以去发布了:

1、打开项目终端,执行npm login登录,按次序输入你刚刚注册的账号密码,还有邮箱验证码(登录前要执行npm config set registry http://www.npmjs.org将npm切换至官方源)

2、登录成功后,执行npm publish。到这就全部完成了

(出错了可以先去npm网站搜你的包名,看是不是已经有人用了,包名是不能跟别人一样的,包名是packge.json里面的name)

(登录的时候会往邮箱发送类似验证码的东西,加粗的数字就是验证码,npm发布包是免费的)

 PS:登录后,你的登录信息会存在你c盘用户文件夹下的.npmrc文件里面,在你修改npm密码后这个文件也得手动修改,或者删除


版权声明:本文为qq_45650200原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。