譯者按： 你可能npm人家的包過成千上萬(wàn)次，但你是否有創(chuàng)建，發(fā)布和使用過自己的npm包？

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

為了保證可讀性，本文采用意譯而非直譯。另外，本文版權(quán)歸原作者所有，翻譯僅用于學(xué)習(xí)。

盡管我已經(jīng)在工作上用了Vue.js一段時(shí)間，但我從不需要在npm上發(fā)布組件。但最近發(fā)現(xiàn)在不同的項(xiàng)目重寫組件是件非常蛋疼的事，所以當(dāng)我第三次使用Vue.js開發(fā)項(xiàng)目時(shí)，我覺得我們是時(shí)候需要一些高度可配置并且可重用的組件了。

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

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

vue create my-vue-library

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

你現(xiàn)在的控制面應(yīng)該看起來如下圖：

現(xiàn)在你只需開始做以下事情：

npm run serve

現(xiàn)在開始創(chuàng)建一個(gè)簡(jiǎn)單的組件，來看一個(gè)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>

將組件注冊(cè)為名為Banner的組件后，可以在模板中簡(jiǎn)單使用該組件：

<Banner>Fundebug：最專業(yè)的應(yīng)用錯(cuò)誤監(jiān)控平臺(tái)!</Banner>

你可以在CodeSandbox查看這個(gè)組件的demo

Fundebug錯(cuò)誤實(shí)時(shí)監(jiān)控為您的Vue項(xiàng)目保駕護(hù)航！

現(xiàn)在，如果你想通過npm使用這個(gè)組件，你必須做一些事情。

第1步 - 設(shè)置庫(kù)構(gòu)建

你需要利用vue-cli將你的組件構(gòu)建為庫(kù)。 將vue-cli-service build --target lib --name myLib [entry]添加到你的package.json腳本中。

默認(rèn)情況下，[entry]是你的App.vue，但你可以將其更改為你導(dǎo)入這些組件的任何文件的相對(duì)路徑。 你可能會(huì)也可能不會(huì)選擇全局注冊(cè)這些組件，但如果我是你，我會(huì)將它們與我的庫(kù)名稱一起注冊(cè)為前綴。 程序員用組件的時(shí)候，代碼越少越好。

我已經(jīng)為我的腳本添加了build-bundle，以便我可以運(yùn)行npm run build-bundle來創(chuàng)建我的庫(kù)包。

這會(huì)產(chǎn)生類似于以下的輸出：

對(duì)于CodeSandbox示例，輸入文件應(yīng)該如下所示：

第2步 - 指向package.json中的輸出文件

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

第3步 - 以用戶身份在npm上添加/登錄

確保你在npm上注冊(cè)。 npm adduser注冊(cè)一個(gè)新用戶和npm login作為一個(gè)現(xiàn)有用戶登錄。

第4步 - 驗(yàn)證npm用戶憑證

輸入npm whoami來驗(yàn)證你的用戶名。

第5步 - 命名你的組件庫(kù)

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

第6步 - 構(gòu)建

通過執(zhí)行在第1步中添加的程序包腳本來構(gòu)建捆綁軟件。

npm run build-bundle

第7步 - 在npm上發(fā)布組件庫(kù)

運(yùn)行npm publish –access public來發(fā)布該庫(kù)供公眾訪問。

就是這樣。 你完成了在npm上發(fā)布你的Vue組件庫(kù)！

第8步 - 如何使用你新發(fā)布的庫(kù)

從npm安裝組件庫(kù)并將組件導(dǎo)入代碼中。 安裝：

npm install --save [你的庫(kù)名]

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

在你的main.js或類似的入口點(diǎn)，只需使用以下命令導(dǎo)入你的庫(kù)：

import '你的庫(kù)名';

現(xiàn)在，你可以開始使用你的組件了，因?yàn)槲覀冊(cè)诘谝徊街腥肿?cè)了這些組件。

對(duì)于我們的示例組件Banner，當(dāng)我們注冊(cè)組件時(shí)，組件名稱為FlockBanner。 所以，你可以直接在你的模板中使用它：

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

使用上面提到的組件庫(kù)查看實(shí)例：https:///s/n9n7yy2lwp

整個(gè)過程我們就完成了。 在Vue.js團(tuán)隊(duì)提出CLI版本3后，構(gòu)建自己的組件庫(kù)以便重用變得非常容易。 如果覺得這個(gè)流程有點(diǎn)幫助，點(diǎn)個(gè)贊唄，同時(shí)也支持下Fundebug哦！

版權(quán)聲明:
轉(zhuǎn)載時(shí)請(qǐng)注明作者Fundebug以及本文地址：
https://blog./2018/06/08/vuejs-component-on-npm/