前言
npm官网: https://www.npmjs.com/
首先去官网注册一个账号，把设置的账号密码记住，然后再把注册的邮箱验证好，否则不行。
上述完事之后我们打开终端(cmd)输入 nrm -V 验证一下是否有nrm，没有的话就用 npm i nrm -g 这个命令把nrm下载下来，之后在输入 nrm -V 验证下就完成。
一、创建个项目；
vue create iamDrawerCompile
二、在文件中编写
跟在自己项目中封装组件类似,目录结构如下；
image.png
"src\components\drawer.vue"文件就是我们封装的组件；"src\views\index.vue"中则是引入使用组件；
image.png
在此项目中，你可以编写，查看，进行封装你认为合适的组件；
三、另创建一个文件，准备进行发布npm插件；目录大概如下
image.png
将你刚才编写的组件的文件全部复制到这个文件夹中；使用命令npm init -y 生成package.json文件；
index.js也需要在这重新编写，内容如下；
import Vue from 'vue'
import iamDrawer from './src/components/drawer.vue'
import './src/assets/css/iconfont.css'
// 放置到数组中
const components = [iamDrawer]
export default {
install:function(app){
for(var i=0;i<components.length;i++){
app.component(components[i].name,components[i])
}
}
}
四、发布命令；
npm login //登录nrm的账户；
npm push //发布包
五、更新命令；
npm version patch
npm publish
六、发布过程中遇到的问题；
-
报错一
image.png
解决方法：package.json文件中的'private'值改成false
-
报错二
image.png
解决方法：将vue.config.js中配置了devServer的反向代理内容；去掉即可
-
报错三
image.png
image.png
解决办法：设置TFA密码；登录自己账号中就有提示，根据提示一步一步设置即可
-
报错四
image.png
网络问题，重新发布下就好了
- 报错五
image.png
去发布，因为package.json中的name值与别人的重复了，修改重新发布就好了
-
报错六
image.png
image.png
npm login登录之后，需要输入npm的账户名、密码、邮箱、以及一次性验证登录密码
其中一次性验证登录密码访问此地址进行获取https://www.npmjs.com/login/9f105de1-d344-4866-b4ad-fbc2a91c09e4，即截图红框上面一行给出的地址；
