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

前言

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

发布成功后，在cpm官网搜索的你组件名称，就能查到，如下图

第一步

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

第二步

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

第三步

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

代码

"package": "vue-cli-service build --target lib ./src/package/index.js/ --name cxy-loading-animation --dest cxy-loading-animation"

指令名称:命令 -- 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版本号，版本号要比上次的大，否则无法上传