Vuejs插件开发并发布到npm在其他项目下载引用流程

开发中我们往往会需要做某些功能，而这个功能会出现很多次并且在其他项目中也应用。为了不重复在写，把这个特殊的需求功能做成属于自己的组件，然后打包长传到管理库npm中。

一、以yCardDragDrop插件开发为例

1、初始化插件项目：vue init webpack-simple ycarddragedrop，目录结构如下

2、添加依赖：npm i；

3、启动服务：npm run dev;

4、在src目录下新建lib文件夹，用于组件开发；

5、开发并调试插件

lib/cardDragger/index.js(全局组件的方式)

main.js

App.vue

调试界面

二、开发调试完成，进行插件打包 1、修改项目主目录下的package.json文件，在文件添加一个程序入口配置，并取消私有

2、修改项目目录中的 webpack.config.js 文件

3、现在所有配置修改该的地方已经差不多，那么我们可以进行打包了。命令：npm run build

4、发布到npm上。首先先登录并邮箱验证。命令：npm login 之后输入你的账号、密码、邮箱。（如果没有账号则去npm官网注册：www.npmjs.com/）

5、登陆成功就可以上传你的插件了。命令：npm publish

最后等10分钟后去别的项目引用 命令：npm install --save-dev carddragdrop (carddragdrop是你上传后的包名) 之后在你的项目main.js 中 improt 导入进来