如何使用@vue/cli 3.0在npm上建立,釋出和使用你自己的Vue.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
看到一條警告:“除非您有冒險精神,否則不要在生產中使用”,很顯然我很有冒險精神,哈哈。
你現在的控制面應該看起來如下圖:
現在你只需開始做以下事情:
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
包。
第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哦!