如何使用@vue/cli 3.0在npm上建立，釋出和使用你自己的Vue.js元件庫

Fundebug發表於2018-06-15
NPMVue.js元件

譯者按： 你可能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看到一條警告：“除非您有冒險精神，否則不要在生產中使用”，很顯然我很有冒險精神，哈哈。

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

如何使用@vue/cli 3.0在npm上建立，釋出和使用你自己的Vue.js元件庫

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


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檢視這個元件的demo

Fundebug錯誤實時監控為您的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來建立我的庫包。

如何使用@vue/cli 3.0在npm上建立，釋出和使用你自己的Vue.js元件庫
這會產生類似於以下的輸出：

如何使用@vue/cli 3.0在npm上建立，釋出和使用你自己的Vue.js元件庫
對於CodeSandbox示例，輸入檔案應該如下所示：

如何使用@vue/cli 3.0在npm上建立，釋出和使用你自己的Vue.js元件庫

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

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

如何使用@vue/cli 3.0在npm上建立，釋出和使用你自己的Vue.js元件庫

第3步 - 以使用者身份在npm上新增/登入

確保你在npm上註冊。 npm adduser註冊一個新使用者和npm login作為一個現有使用者登入。

第4步 - 驗證npm使用者憑證

輸入npm whoami來驗證你的使用者名稱。

第5步 - 命名你的元件庫

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

如何使用@vue/cli 3.0在npm上建立，釋出和使用你自己的Vue.js元件庫

第6步 - 構建

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


npm run build-bundle

複製程式碼

第7步 - 在npm上釋出元件庫

執行npm publish --access public來發布該庫供公眾訪問。

就是這樣。 你完成了在npm上釋出你的Vue元件庫！

第8步 - 如何使用你新發布的庫

從npm安裝元件庫並將元件匯入程式碼中。 安裝：


npm install --save [你的庫名]

複製程式碼

其中[你的庫名]是你在第5步中給出的庫的名稱。

在你的main.js或類似的入口點，只需使用以下命令匯入你的庫：


import '你的庫名';

複製程式碼

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

如何使用@vue/cli 3.0在npm上建立，釋出和使用你自己的Vue.js元件庫

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


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

複製程式碼

使用上面提到的元件庫檢視例項：https://codesandbox.io/s/n9n7yy2lwp

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

相關文章