NPM 发布自己的包(自己的发布项目邮箱图标)「npm发布自己的组件」

1. 注册账号 https://www.npmjs.com/

2. 验证邮箱 (邮箱一定要验证通过，不然后面会出错)

3. 整理你本地的项目

以下我以一个实际项目（tao-icon）作为说明

介绍：项目是基于vue脚手架构建为了方便引入了element-ui库，字体图标和 svg 图标库，基于 阿里图标库和 fontawesome

tao-icon 展示

tao-icon-selec 展示

项目结构

package.json 配置

{ "name": "tao-icon", "version": "0.1.5", // 描述 "description": "个人使用图标库,不建议用于生产", "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", "build:lib": "vue-cli-service build --target lib --name taoIcon --dest lib src/components/index.js", "lint": "vue-cli-service lint" }, // npm包项目的主要入口文件，必须的 "main": "lib/taoIcon.common.js", // npm 上所有的文件都开启 cdn 服务地址 "unpkg": "lib/taoIcon.umd.js", "style": "lib/taoIcon.css", // git仓库所在位置 "repository": { "type": "git", "url": "https://gitee.com/upholdjx/tao-icon.git" }, // 主页 "homepage": "https://gitee.com/upholdjx/tao-icon", "author": "upholdjx", "keywords": [ "icon", "vue", "components" ], "license": "MIT",//协议 "bugs": { "url": "https://gitee.com/upholdjx/tao-icon/issues" }, "peerDependencies": { "vue": "^2.6.11" }, "browserslist": [ "> 1%", "last 2 versions", "not ie <= 8" ], // 依赖 "dependencies": { "core-js": "^3.6.5", "element-ui": "^2.13.2", "vue": "^2.6.11" }, "devDependencies": { "@vue/cli-plugin-babel": "~4.5.0", "@vue/cli-plugin-eslint": "~4.5.0", "@vue/cli-service": "~4.5.0", "babel-eslint": "^10.1.0", "babel-plugin-component": "^1.1.1", "eslint": "^6.7.2", "eslint-plugin-vue": "^6.2.2", "svg-sprite-loader": "^4.2.1", "vue-template-compiler": "^2.6.11" }}

一定去掉

如果 "private": true在package.json中设置，那么npm将拒绝发布它，这是一种防止意外发布私有存储库的方法。

npm adduserornpm login## 需要输入你的账号、密码、邮箱

登录

前期是你npm 注册过了，并且邮箱验证是通过了的

npm publish

发布成功

npm 上可以看到了

需要注意：每次更新版本的时候，版本号一定要依次迭代，不然发布不成功

1.问题一，镜像问题

npm ERR! code E403

npm ERR! 403 Forbidden - PUT https://registry.npm.taobao.org/lld-npm-demo - no_perms

npm ERR! A complete log of this run can be found in:

解决方案：

1.检查仓库是否被设成了淘宝镜像库(https://registry.npm.taobao.org/)

npm config get registry

2.如果设置了淘宝镜像，执行以下命令

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

3.解决问题后重新发布

npm publish

4.发布成功以后，再设回淘宝镜像

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

2.问题二：邮箱未验证

解决方案：

3.问题三：账号未登陆

npm ERR! code E401

npm ERR! 401 Unauthorized - PUT http://registry.npmjs.org/lld-npm-demo - You must be logged in to publish packages.

4.问题四： 版本号

npm ERR! code E403

npm ERR! 403 Forbidden - PUT http://registry.npmjs.org/lld-npm-demo - You cannot publish over the previously published versions: 1.0.0.

去邮箱验证，注意邮箱是不是被屏蔽了，垃圾邮箱里面也看看

npm install tao-icon --save import taoIcon from 'tao-icon'import "tao-icon/lib/taoIcon.css";Vue.use(taoIcon)

图标显示组件:

<tao-icon value="fa pie-chart 32" />1<tao-icon value="iconfont faqikaohe 32" />2<tao-icon value="svg-icon iconchuangjianzhibiao 64" />3// 类型 class 大小

选择图标组件

<tao-icon-select v-model="icon" /> icon:'svg-icon tao-todo 124'总结

上面基于tao-icon 这个demo举例了下如何发布包，这个库就是个参考的，不要用于生产，一般每个项目都会遇到使用字体图标和svg 图标的，图标也是由项目决定的，不好弄到统一使用一个库，但扩展自己的还是可以了，也就介绍这么多想看这个举例项目的地址也在上面了，我放到码云上了可以找到，如果上面我写的有什么问题的欢迎下面评论讨论，一起进步！