想必大家有过这种烦恼，同一个方法，新项目用的时候还得去找之前写过的代码，不仅耗时，而且方法有变动之后，还得将之前的老方法替换掉。如果将封装的方法放到npm上，要用的时候安装一下，就可以省下很多时间和精力，如果你也有这种困惑，希望本文能帮助到你。
一、注册npm账号
发布代码前得注册一个npm账号，这样才能进行发布操作。通过npm官网注册，如图1所示。
图1 npm官网注册图
注册完毕后，注意查看邮箱，需要进行验证，通过验证才可进行发布操作。敲破黑板，这点很重要。
二、创建项目
项目分为三个部分，分别是封装的组件、入口文件和配置文件。
组件即你要上传的代码，就不细说了。index.js将export出去你的组件，是组件和package.json连接的桥梁。至于pakeage.json，它不仅仅是用来标明依赖和npm script脚本，也可以是一个npm包被外界识别的配置文件。
项目结构如图2所示。
图2 项目结构图
changeTime.js代码如下：
1 let changeTime = { 2 ChangeTime(time, status) { 3 var changetime = new Date(time); 4 5 var year = changetime.getFullYear(); 6 var month = changetime.getMonth(); 7 var day = changetime.getDate(); 8 var hour = changetime.getHours(); 9 var minutes = changetime.getMinutes(); 10 var seconds = changetime.getSeconds(); 11 12 var datetime = ‘‘; 13 if (status == ‘YMD‘) { 14 datetime = year + ‘-‘ + (month + 1) + ‘-‘ + day; 15 } else { 16 datetime = year + ‘-‘ + (month + 1) + ‘-‘ + day + ‘ ‘ + hour + ‘:‘ + minutes + ‘:‘ + seconds; 17 } 18 19 return datetime 20 }, 21 ChangeTime1() { 22 }, 23 ChangeTime2() { 24 } 25 } 26 export default changeTime
index.js代码如下：
1 import changeTime from ‘./changeTime.js‘ 2 3 export default changeTime
至于package.json，你可以使用我在下方贴出来的代码，也可以自己初始化一个，建议初始化一个，这样印象深刻（拒绝白嫖，自己去创建）。
在文件夹地址栏中运行cmd，打开命令行面板，输入：
npm init
效果如图3所示。
图3 初始化package.json文件
就知道你要白嫖，我把我的也放出来吧。
package.json代码如下：
1 { 2 "name": "xxx", 3 "version": "1.0.0", 4 "description": "时间转换组件", 5 "main": "index.js", 6 "scripts": { 7 "test": "echo \"Error: no test specified\" && exit 1" 8 }, 9 "author": "xxx", 10 "license": "ISC" 11 }
这是我的配置文件，内容更全面，其实也是当初我百度的。
沈腾式承认：不装了，我摊牌咧。
package.json代码如下：
1 { 2 "name": "xxx", 3 "version": "1.0.1", 4 "description": "公共功能的js", 5 "main": "index.js", 6 "scripts": { 7 "serve": "vue-cli-service serve", 8 "build": "vue-cli-service build", 9 "lint": "vue-cli-service lint" 10 }, 11 "author": "xxx", 12 "license": "ISC", 13 "dependencies": { 14 "core-js": "^3.6.5", 15 "vue": "^2.6.11" 16 }, 17 "devDependencies": { 18 "@vue/cli-plugin-babel": "~4.5.0", 19 "@vue/cli-plugin-eslint": "~4.5.0", 20 "@vue/cli-service": "~4.5.0", 21 "babel-eslint": "^10.1.0", 22 "eslint": "^6.7.2", 23 "eslint-plugin-vue": "^6.2.2", 24 "vue-template-compiler": "^2.6.11" 25 }, 26 "eslintConfig": { 27 "root": true, 28 "env": { 29 "node": true 30 }, 31 "extends": [ 32 "plugin:vue/essential", 33 "eslint:recommended" 34 ], 35 "parserOptions": { 36 "parser": "babel-eslint" 37 }, 38 "rules": {} 39 }, 40 "browserslist": [ 41 "> 1%", 42 "last 2 versions", 43 "not dead" 44 ] 45 }
三、发布代码
终于，激动人心的时刻来了，喝桶水继续~
命令行输入
npm adduser
账号、密码、邮箱填写的都是在npm官网注册的信息。温馨提示：输入密码时是看不到的，不要怀疑电脑坏了，也不要怀疑人生。效果如图4所示。
图4 登录账号图
接下来输入npm publish即可进行发布：
npm publish
效果如图5所示：
图5 发布成功图
如果发布失败，一般有这几种问题：如当前登陆人和配置文件里的登陆人不一致、版本号问题、配置文件里的name重复等。具体报错请出门右转打开百度。
四、下载验证
伟人说：实践是检验真理的唯一标准。组件是否发布成功，得看下载引用才能得出结论。
在vue项目里下载依赖：
npm install changetime_test --save
在main.js里引用：
1 import changeTime from ‘changetime_test‘ 2 3 console.log(‘--查看时间组件--‘, changeTime.ChangeTime(new Date()))
效果如图6所示：
图6 引用组件图
至此，将代码发布到npm的流程就告一段落了。
五、常见报错
下面是一些常见报错：
npm publish failed put 500 unexpected status code 401
一般是没有登录，重新登录一下 npm login 即可
npm ERR! you do not have permission to publish “your module name”. Are you logged in as the correct user?
包名被占用，改个包名即可。最好在官网查一下是否有包名被占用，之后再重命名
you must verify your email before publishing a new package
邮箱未验证，去官网验证一下邮箱
原文：https://www.cnblogs.com/yyzhiqiu/p/14979581.html
