如何将组件发布到NPM库-详解

4 篇文章 0 订阅
3 篇文章 0 订阅
  1. 搭建发布环境
    a) 下载node(http://nodejs.cn/download/)
    b) 下载vue-cli(npm install @vue/cli)

  2. 创建一个vue项目( vue create myui )

  3. 修改默认文件夹src为examples

  4. 新建一个packages文件夹

  5. 修改vue.config.js文件
    在这里插入图片描述

  6. 编写组件代码
    a) 先新建一个简单的button组件,
    b) Packages文件夹下新建一个组件文件夹和入口文件index.js
    在这里插入图片描述

c) 然后srcs文件夹下存放组件源代码
在这里插入图片描述
d) 在button下的index.js l里编写如下代码 作为vue组件的安装(详细文档可以看vue官网的组件篇)
在这里插入图片描述

e) 接下来在packages的入口文件中导入组件并安装导出
在这里插入图片描述
7. 组件编写完毕 进入packages文件夹下 实例化一个package.json(npm init -y)
在这里插入图片描述
a) name:包名,version:版本号,description:组件描述,main:入口文件
8. 登录npm官网(https://www.npmjs.com)
a) 没有账号新注册一个
b) 切换到npm官方源
i. 查看npm当前源( npm config get registry 或者 npm config list )
ii. 设置回原本的源,用来发布npm包( npm config set registry https://registry.npmjs.org/ )
iii. 设置为淘宝镜像(npm config set registry https://registry.npm.taobao.org)
9. 首次需要设置用户名密码绑定npm
a) npm adduser ( 输入改行密令 会让你绑定自己的账号 按提示输入 )
b) 邮箱认证( 点击npm官网头像选择账户,点击2FA认证)
注意:认证需要下载一个authenticator应用程序(问我要 v:vip2796547009)
c) 切换到要发布的包( cd packages )
d) 执行发布密令( npm publish )
10. 返回npm官网查看发布是否成功

  • 发布过程中容易出现的错误  npm adduser / npm publish 报错:

    https://blog.csdn.net/meteorsshower2013/article/details/121957217?utm_medium=distribute.pc_relevant.none-task-blog-2defaultbaidujs_title~default-1.pc_relevant_default&spm=1001.2101.3001.4242.2&utm_relevant_index=4)

    Npm双因素身份认证(2FA):
    https://segmentfault.com/a/1190000041025567

  • 2
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 4
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值