前言

組件封裝發(fā)布到npm平臺后，別人就可以通過命令安裝的你的插件來使用，一個好的公共組件應(yīng)該具備靈活，可通用性等特點。

發(fā)布到npm平臺后，搜索你的組件名稱就能查到，如下圖

npm官網(wǎng)鏈接：https://www.npmjs.com/

第一步

創(chuàng)建簡單的vue項目，使用 vue create xxx 創(chuàng)建vue項目

第二步

在src文件夾下創(chuàng)建package 文件夾，并封裝你的組件，然后創(chuàng)建在package文件夾下面創(chuàng)建 index.js，在index.js 文件引入封裝好的組件，如下

第三步

在package.json文件添加下面這段代碼

代碼

指令名稱:命令 -- target lib --name 打包后文件名稱 打包路徑 --dest 打包后文件夾名

第四步

執(zhí)行npm run package 命令進行打包，執(zhí)行成功后會在目錄下生成一個文件，如下

進入剛才生成的文件夾，進入命令 cd cxy-loading-animation ， 執(zhí)行初始化命令 npm init -y ，會生成package.json, 在package.json可以寫一些配置。

優(yōu)化，只保留我們需要的文件，并新建 readme.md 寫上組件使用說明。

新建一個style文件夾，存放css文件，如果覺得 cxy-loading-animation.umd.min.js 名字太長，可以改為index.js， 同時在package.json 里面 main：入口文件更改為index.js ，優(yōu)化后，如下圖所示。

第五步

使用npm adduser 命令添加npm賬號，如果沒有自行到npm注冊一個賬號即可

第六步

使用 npm publish 上傳插件到npm平臺

上傳成功后，可以在平臺看到，如下

到這來封裝的組件已經(jīng)上傳到npm平臺了。

注意： 如果上傳失敗可能是名字重復(fù)了，改名字即可，也有可能是鏡像問題，如果你之前更換可淘寶鏡像，請切換官方鏡像，切換命令如下：

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

在項目里面使用我們自己的插件

執(zhí)行安裝命令

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版本號，版本號要比上次的大，否則無法上傳

微信公眾號【軟件聚導(dǎo)航】