vue插件封装并发布npm流程记录

前言

我们平时可能使用vue + webpack开发过许多项目，有时候会需要特殊的插件或组件来满足我们的功能。比如日期插件，一般我们可以在网络上面找一个适合项目需求的控件。但是往往辛苦找到的控件不满足我们的需求，要么就改改改，要么我们可以自己做一个（当然前提是我们有足够的时间和兴趣）。既然我们的插件都做出来了，我们也可以将它发布到npm分享给更多的人使用，岂不是美事一桩。

步骤

下面将分成两个部分来讲解一下我自己在封装配置插件时研究的发布及更新流程，包括开发好的插件如何配置文件，以及如何发布npm并更新。这里只是介绍了自己配置插件或组件相关文件（并没有详细说明插件的开发过程），重点在于如何配置文件及发布npm。

1、封装vue插件

（1）初始化插件项目（命令：vue init webpack-simple vue-project-name），使用这个命令初始化的vue项目更适合封装vue插件，删除 src 中除了 main.js 和 app.vue 外的文件，清空 app.vue 中无用的内容，建议整理完项目目录如下：

初始化整理的项目目录

（2）使用vue+webpack开发好了一个插件（如：日期控件）或组件（如：像element-ui这种前端UI框架）。尝试在本地项目 app.vue 中引用刚刚完成插件，测试没问题之后再进行下一步。

（3）更改配置文件！！

        1、package.json文件：你的插件版本号，以后每次上传更新npm都需要修改；private 设置为 false 才能发布；mian 填写 dist 里文件路径；repository 如果你有github并上传了你的代码的话，填写你的github托管地址。修改如下图：

package.json文件配置修改

        2、对应插件（组件）目录下 index.js 文件，将插件（组件）对外暴露，如下：

向外暴露插件（组件）

        3、webpack.config.js 文件，修改 entry 和 filename，如下：

入口及文件名修改

        4、index.html 里 script src 路径修改，如下：

js应用路径修改

        5、gitignore 文件，去掉 dist/，如下：

去掉dist/

        6、在 src 目录下新建 index.js 文件，如下：

对外暴露插件（组件）

（4）运行命令 npm run build 就可以打包，然后按照接下来的步骤2发布到npm就可以了。

2、发布npm及更新

（1）安装 nodejs（网络上面教程很多）。

（2）根据步骤1开发并配置好了插件（组件）。

（3）去 npm 官网注册 npm 账号（官网：https://www.npmjs.com/）。

（4）进入你开发的插件（组件）项目目录，添加账户、登录、发布。

        1、上传发布之前，在 npm 官网搜索一下你的插件（组件）包名有没有被占用（即 package.json 里取名）。如被占用，修改取名 name 字段。

修改包名

        2、添加账户，登录，发布插件（添加账户是避免出现一些问题），如下图：

添加账户登录发布

（5）更新插件，在 package.json 里修改 version，小改动将最后一位加一，然后重复步骤（4），就实现了更新。

更新插件（组件）

以上就是vue插件（组件）封装并发布npm的步骤及注意事项的记录，希望对你能有所帮助。而我自己在以后的日子里，也可以翻阅出来巩固复习。