譯者按： 你可能npm人家的包過成千上萬次，但你是否有建立，釋出和使用過自己的npm包？

為了保證可讀性，本文采用意譯而非直譯。另外，本文版權歸原作者所有，翻譯僅用於學習。

儘管我已經在工作上用了Vue.js一段時間，但我從不需要在npm上釋出元件。但最近發現在不同的專案重寫元件是件非常蛋疼的事，所以當我第三次使用Vue.js開發專案時，我覺得我們是時候需要一些高度可配置並且可重用的元件了。

首先，你需要安裝vue-cli才能開始。

npm install -g @vue/cli
# 或者
yarn global add @vue/cli

vue create my-vue-library
 

我們正在使用vue-cli 3.0 beta版本。 你可能會Github的README.md看到一條警告：“除非您有冒險精神，否則不要在生產中使用”，很顯然我很有冒險精神，哈哈。

你現在的控制面應該看起來如下圖：

現在你只需開始做以下事情：

npm run serve

現在開始建立一個簡單的元件，來看一個`Banner`元件的例子。

<template>
  <div class="banner" :style="bannerStyles" :class="`banner__${position}`">
    <slot
 
></slot>
  </div>
</template>

<script>
const defaultStyles = {
  left: 0,
  right: 0,
};
export default {
  props: {
    position: {
      type: String,
      default: 'top',
      validator(position) {
        return ['top', 'bottom'].indexOf(position) > -1;
      },
    },
    styles: {
      type: Object
 
,
      default: () => ({}),
    },
  },
  data() {
    return {
      bannerStyles: {
        ...defaultStyles,
        ...this.styles,
      },
    };
  },
};
</script>

<style lang="scss" scoped>
.banner {
  padding: 12px;
  background-color: #fcf6cd;
  color: #f6a623;
  text-align: left;
  position: fixed;
  z-index: 2;
}
.banner__top {
  top: 0;
}
.banner__bottom {
  bottom: 0;
}
</style>

將元件註冊為名為`Banner的`元件後，可以在模板中簡單使用該元件：

<Banner>Fundebug：最專業的應用錯誤監控平臺!</Banner>

你可以在[CodeSandbox](https://codesandbox.io/s/rl5626jy1n)檢視這個元件的demo [Fundebug](https://www.fundebug.com)錯誤實時監控為您的Vue專案保駕護航！ 現在，如果你想通過npm使用這個元件，你必須做一些事情。

第1步 - 設定庫構建

你需要利用vue-cli將你的元件構建為庫。 將vue-cli-service build --target lib --name myLib [entry]新增到你的package.json指令碼中。

預設情況下，[entry]是你的App.vue，但你可以將其更改為你匯入這些元件的任何檔案的相對路徑。 你可能會也可能不會選擇全域性註冊這些元件，但如果我是你，我會將它們與我的庫名稱一起註冊為字首。 程式設計師用元件的時候，程式碼越少越好。

我已經為我的指令碼添加了build-bundle，以便我可以執行npm run build-bundle來建立我的庫包。

這會產生類似於以下的輸出：

對於CodeSandbox示例，輸入檔案應該如下所示：

第2步 - 指向package.json中的輸出檔案

為了確保package.json中的main屬性正確指向輸出檔案。 我更喜歡使用commonjs包。

## 第3步 - 以使用者身份在npm上新增/登入 確保你在npm上註冊。 `npm adduser`註冊一個新使用者和`npm login`作為一個現有使用者登入。 ## 第4步 - 驗證npm使用者憑證 輸入`npm whoami`來驗證你的使用者名稱。

第5步 - 命名你的元件庫

為你的包選擇一個名字，你必須確保它尚未被使用。 確保把它放在你的package.json中。

## 第6步 - 構建 通過執行在第1步中新增的程式包指令碼來構建捆綁軟體。

npm run build-bundle

## 第7步 - 在npm上釋出元件庫 執行`npm publish` –`access public`來發布該庫供公眾訪問。 就是這樣。 你完成了在npm上釋出你的Vue元件庫！ ## 第8步 - 如何使用你新發布的庫 從npm安裝元件庫並將元件匯入程式碼中。 安裝：

npm install --save [你的庫名]

其中[你的庫名]是你在第5步中給出的庫的名稱。 在你的`main.js`或類似的入口點，只需使用以下命令匯入你的庫：

import '你的庫名';

現在，你可以開始使用你的元件了，因為我們在第一步中全域性註冊了這些元件。

對於我們的示例元件Banner，當我們註冊元件時，元件名稱為FlockBanner。 所以，你可以直接在你的模板中使用它：

<flock-banner>這是你的Banner是示例</flock-banner>

整個過程我們就完成了。 在Vue.js團隊提出CLI版本3後，構建自己的元件庫以便重用變得非常容易。 如果覺得這個流程有點幫助，點個讚唄，同時也支援下Fundebug哦！