如何使用@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哦！