1. 首先創(chuàng)建一個空的vue項目
2. 在/src/下創(chuàng)建一個components目錄，該目錄的根節(jié)點下創(chuàng)建index.js，寫入以下內(nèi)容：
import cattleInfo from "@/components/cyxCattleInfo";
const components = [cattleInfo]
const install =function(Vue) {
????components.forEach(component => {
????????Vue.component(component.name, component);? ?
????});}
if (typeof window !=='undefined' &&window.Vue) {
????install(window.Vue);
}
export default {install,? ? cattleInfo}
3. 在components下創(chuàng)建組件(名稱自定義)目錄，該目錄下創(chuàng)建src目錄和index.js，
目錄結(jié)構(gòu)，如下圖：
組件下的index.js的代碼如下
import cattleInfo from './src/cattleInfo';
/* istanbul ignore next */
cattleInfo.install = function(Vue) {
????Vue.component(cattleInfo.name, cattleInfo);
};
export default cattleInfo;
組件下的src中寫入自己要封裝的組件（組件名稱要一致）：
5. 配置后項目中的pakage.json文件，如下圖：
圖中：--name cyx-cattle-info：cyx-cattle-info，為插件名稱，也是發(fā)布到npm上的名稱，命名前到npm官網(wǎng)查詢是否含有其名字！
6. 這一切配置好后，在項目的根目錄下，執(zhí)行命令：npm run package，執(zhí)行完后，會生成cux-cattle-info目錄，如下圖：
執(zhí)行命令：cd cyx-cattle-info
執(zhí)行命令：npm iniy -y（對該目錄進(jìn)行初始化），得到package.json，如下圖：
其次，在該目錄下，執(zhí)行命令：npm publish（發(fā)布插件到npm上）；
注意：發(fā)布到npm倉庫
（1）注冊賬號
想要發(fā)布到npm倉庫，就必須要有一個賬號，先去npm官網(wǎng)注冊一個賬號，注意記住用戶名、密碼和郵箱，發(fā)布的時候可能會用到。
（2）設(shè)置npm源
有些小伙伴可能本地的npm鏡像源采用的是淘寶鏡像源或者其它的，如果想要發(fā)布npm包，我們得吧我們得npm源切換為官方得源，命令如下：
npm config set registry=https://registry.npmjs.org
（3）添加npm用戶
進(jìn)入thp-button-ui目錄，添加npm用戶，執(zhí)行命令：
npm adduser
這里會讓你填寫用戶名、密碼、郵箱，然后會收到一封郵件，郵件里面有個類似于驗證碼的東西，如果之前設(shè)置過即可跳過此步。
（4）發(fā)布npm
npm publish
如果發(fā)布失敗可在百度搜索失敗code碼，一般都是名字重復(fù)或者名字不合格
7. 其他項目使用時，只需要在該項目下執(zhí)行命令：npm i 插件名稱
然后在項目中的main.js中加入：
就可以全局使用這個插件了！
8. 最后，每次更新這個插件時，將自己更新完的代碼進(jìn)行打包（npm run package）,然后重新初始化（npm init -y），然后再將版本號升級（npm version patch）,在發(fā)布到npm 上（npm publish）
9. 若是刪除這個npm插件時，只需要cd到該插件的目錄下，然后執(zhí)行命令（npm unpublish 插件名稱 --force），將插件刪除后，24小時內(nèi)不可再次創(chuàng)建之前相同名稱的插件！！
