封装vue公共组件，并发布npm平台，让所有人都可以下载使用

前言

组件封装发布到npm平台后，别人就可以通过命令安装的你的插件来使用，一个好的公共组件应该具备灵活，可通用性等特点。

发布到npm平台后，搜索你的组件名称就能查到，如下图

npm官网链接：https://www.npmjs.com/

第一步

创建简单的vue项目，使用 vue create xxx 创建vue项目

第二步

在src文件夹下创建package 文件夹，并封装你的组件，然后创建在package文件夹下面创建 index.js，在index.js 文件引入封装好的组件，如下

第三步

在package.json文件添加下面这段代码

代码

指令名称:命令 -- target lib --name 打包后文件名称 打包路径 --dest 打包后文件夹名

第四步

执行npm run package 命令进行打包，执行成功后会在目录下生成一个文件，如下

进入刚才生成的文件夹，进入命令 cd cxy-loading-animation ， 执行初始化命令 npm init -y ，会生成package.json, 在package.json可以写一些配置。

优化，只保留我们需要的文件，并新建 readme.md 写上组件使用说明。

新建一个style文件夹，存放css文件，如果觉得 cxy-loading-animation.umd.min.js 名字太长，可以改为index.js， 同时在package.json 里面 main：入口文件更改为index.js ，优化后，如下图所示。

第五步

使用npm adduser 命令添加npm账号，如果没有自行到npm注册一个账号即可

第六步

使用 npm publish 上传插件到npm平台

上传成功后，可以在平台看到，如下

到这来封装的组件已经上传到npm平台了。

注意： 如果上传失败可能是名字重复了，改名字即可，也有可能是镜像问题，如果你之前更换可淘宝镜像，请切换官方镜像，切换命令如下：

npm  config set registry=https://registry.npmjs.org

在项目里面使用我们自己的插件

执行安装命令

npm install cxy-loading-animation

然后再main.js引用全局注册

import cxyLoadingAnimation from 'cxy-loading-animation'

import 'cxy-loading-animation/cxy-loading-animation.css'Vue.use(cxyLoadingAnimation)

然后再需要使用的页面使用即可

<cxyLoadingAnimation :animation="true" />

组件效果

版本更新

如果更新组件，需要修改version版本号，版本号要比上次的大，否则无法上传

微信公众号【软件聚导航】