vue组件封装npm包

前言
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，即截图红框上面一行给出的地址；