Vue项目打包组件并上传到npm在其他项目和下载引用 步骤流程

首先问题：开发中我们往往需要做某些功能，这个功能可能会出现很多次，也会出现在不同的项目。需要使用时候又不想重新写，怎么办呢？

解决思路:  把这个特殊的需求功能做成属于自己的组件，当下次需要的我们之间去使用它。那么我们就打包他上次到管理库npm

1.首先你要把你的想打包的项目写完，或者不会报错情况下进行。

1.    修改你项目主目录下的package.json文件在文件添加一个程序的入口配置 如图：还有记得修改private 为 false
2. 

      2.修改项目目录 -》bulid -》webpack.prod.conf.js文件 如图：

        需要注意的 libraryTarget 的umb 是写死的，原因是什么，可能要问npm官方了。

    3.第三步。修改 config -》index.js 文件 如图

     

 

第4步。修改main.js  在此文件中添加你的功能组件并export导出

/* 封装的功能组件 */
import VueHzf5Package from './components/divImgBox.vue'

/* 导出 */
export default VueHzf5Package

 

第5步.现在所有配置修改该的地方已经差不多，那么我们可以进行打包了。命令：

 npm  run  build 

 

 

 打包成功后这样。注意检查是否打包成功，

6.最后一步.发布到npm上。首先先登录并邮箱验证：命令
   npm  login  回车。

   之后输入你的账号、密码、邮箱。（如果没有账号则去npm官网注册很简单：官方网站）

 

 

登录成功后就可以上次你的组件了  命令：npm publish ；

 

呐。大功告成。我的web520项目 1.0版本成功上传上去了。注意上传成功，需要10分钟后才能下载应用使用

 10分钟后去别的项目引用 指令 ：npm install --save-dev web520  (web520是你上传后的包名)

 之后就在你项目main.js improt 导入进来当组件使用吧。

 谢谢。大佬观看，有问题请下面评论反馈谢谢。