在NPM上发布组件教程

第一次在NPM上发布,还是有点陌生,所以在此记录下

提前准备:要在NPM上面发布要有账号,所以先去注册一个账号

初始化组件

首先使用vue-cli把架子搭好,我下面的代码基于vue-ui这个来做例子

vue init webpack vue-ui
cd vue-ui
npm i
npm run dev

修改配置文件

package.json文件(我只列出需要注意的):

//版本号,需要多次提交时注意修改
"version": "1.0.0",
//npm默认创建的项目是私有的,如果要发布至npm必须将其公开
"private": false,
//别人用这个包时,引入的文件
"main": "./src/main.js",
//github地址
"repository": {
  "type": "git",
  "url": "git+https://github.com/wangdaodao/vue-ui.git"
},

我组件的目录:

|-src
  |-assets
    |-css
    |-font
    |-js
  |-components
    |-button
    |-checkbox
      ...
    |-upload
  |-main.js

发布到NPM

npm login
npm publish

注意:如果修改过npm镜像,还需要再修改回来,不然可是会出问题。

npm config set registry=http://registry.npmjs.org

发布包过程可能会遇到很多问题,我印象比较深刻的是:

npm ERR! You do not have permission to publish "vue-ui". Are you logged in as the correct user? : vue-ui

这里大概的意思是没有权限发布,应该是重名了,所以在发布之前先去NPM上面查下是不是有重名的。

后记

折腾了很久,终于把组件发布出去了,再放几个常用的命令,有可能会用到:

//移除一个发布包(也可以移除指定版本的包)
npm unpublish --force
//登出用户
npm logout

标签: VUE, NPM

除单独说明外,文章默认采用知识共享署名-相同方式共享 4.0 国际许可协议进行许可。

仅有一条评论

  1. 大神啊

添加新评论