如何使用@vue/cli 3.0在npm上創建，發布和使用你自己的Vue.js組件庫

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

• 原文: How to create, publish and use your own VueJS Component library on NPM using @vue/cli 3.0
• 譯者: Fundebug

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

盡管我已經在工作上用了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;
 
 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來創建我的庫包。

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

對於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>

使用上面提到的組件庫查看實例：https://codesandbox.io/s/n9n7yy2lwp

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