TL;DR 本文細(xì)致講解了在NPM上發(fā)布一個(gè)Vue組件的全過程杆兵，包括創(chuàng)建項(xiàng)目、編寫組件昔字、打包和發(fā)布四個(gè)環(huán)節(jié)垮庐。
創(chuàng)建項(xiàng)目
這里我們直接利用@vue/cli來生成項(xiàng)目松邪。如果沒有安裝@vue/cli的話，可以使用以下方法進(jìn)行安裝：
# 如果喜歡npm
npm i -g @vue/cli
# 如果喜歡yarn
yarn global add @vue/cli
此外哨查，如果安裝了npx（高版本的nodejs發(fā)行版會(huì)自帶這一工具）的話逗抑，還可以很方便地通過npx vue這一方式實(shí)現(xiàn)免安裝使用。
接下來就可以創(chuàng)建項(xiàng)目了寒亥，這里我們創(chuàng)建一個(gè)my-banner項(xiàng)目邮府，里面將會(huì)包含一個(gè)Banner組件：
vue create my-banner
@vue/cli會(huì)提示你選擇一個(gè)預(yù)置（preset）的配置，這里我們直接選擇“default”（babel, eslint）就可以溉奕，之后@vue/cli會(huì)自動(dòng)調(diào)用yarn或npm來進(jìn)行依賴的下載褂傀。下載完成后就可以進(jìn)入項(xiàng)目目錄了：
cd my-banner
此時(shí)的目錄結(jié)構(gòu)為：
├── README.md
├── babel.config.js
├── node_modules
├── package.json
├── public
│ ├── favicon.ico
│ └── index.html
├── src
│ ├── App.vue
│ ├── assets
│ ├── components
│ └── main.js
└── yarn.lock
下面啟動(dòng)開發(fā)環(huán)境本地服務(wù)器：
yarn serve
打開localhost:8080，就可以看到默認(rèn)的首頁：
編寫組件
我們現(xiàn)在開始編寫一個(gè)非常簡單的Banner組件腐宋。
<!-- src/components/Banner.vue -->
<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.vue置于src/components目錄下，同時(shí)在該目錄下新建一個(gè)index.js文件，用來注冊Vue組件胸竞。
// src/components/index.js
import Vue from "vue";
import Banner from "./Banner.vue";
const Components = {
Banner
};
Object.keys(Components).forEach(name => {
Vue.component(name, Components[name]);
});
export default Components;
接下來我們修改一下@vue/cli自動(dòng)生成的src/components/HelloWorld.vue文件欺嗤，引用一下我們剛剛編寫的Banner組件：
<!-- src/components/HelloWorld.vue -->
<template>
<div class="hello">
<!-- 下面插入了我們剛剛編寫的Banner組件 -->
<Banner>This is a banner!</Banner>
<h1>{{ msg }}</h1>
<p>
For a guide and recipes on how to configure / customize this project,<br>
check out the
<a target="_blank" rel="noopener">vue-cli documentation</a>.
</p>
<!-- 省略部分內(nèi)容 -->
</div>
</template>
<script>
<!-- 省略有關(guān)內(nèi)容 -->
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
<!-- 省略有關(guān)內(nèi)容 -->
</style>
修改一下項(xiàng)目的主入口main.js
// src/main.js
import Vue from 'vue';
import App from './App.vue';
// 引用我們的自定義組件
import "./components";
Vue.config.productionTip = false;
new Vue({
render: h => h(App),
}).$mount('#app');
因?yàn)榍懊娑xstyle時(shí)使用了scss，所以還需要安裝兩個(gè)開發(fā)環(huán)境依賴項(xiàng)
yarn add sass-loader node-sass -D
最后執(zhí)行
yarn serve
就可以在localhost:8080看到效果了：
可以看到卫枝，我們編寫的Banner組件已經(jīng)成功在頁面上渲染出來了煎饼。
打包
接下來，我們需要對(duì)這個(gè)組件進(jìn)行打包校赤。這里我們可以使用@vue/cli 3.0自帶的打包功能吆玖。打開package.json文件，在scripts中增加一項(xiàng)：
{
"scripts": {
"package": "vue-cli-service build --target lib --name my-banner ./src/components/index.js"
}
}
然后執(zhí)行yarn package马篮，會(huì)在dist目錄下生成下列文件：
├── demo.html
├── my-banner.common.js
├── my-banner.common.js.map
├── my-banner.css
├── my-banner.umd.js
├── my-banner.umd.js.map
├── my-banner.umd.min.js
└── my-banner.umd.min.js.map
接下來沾乘，需要將package.json中的main字段指向剛剛生成的庫文件。這里以commonjs為例（umd應(yīng)該也是沒問題的）：
{
"main": "./dist/my-banner.common.js"
}
然后浑测，我們需要在package.json的files字段中聲明這個(gè)組件庫項(xiàng)目需要包含的文件：
{
"files": [
"dist/*",
"src/*",
"public/*",
"*.json",
"*.js"
]
}
這樣就可以打包階段就算是完成了翅阵。
發(fā)布
注冊NPM賬號(hào)并創(chuàng)建組織
首先登陸NPM官網(wǎng)
注冊賬號(hào)，都是常規(guī)操作迁央，需要填寫的有全名掷匠、郵箱、用戶名和密碼岖圈。之后郵箱會(huì)收到確認(rèn)郵件讹语，標(biāo)題為“Verify your npm email address”，發(fā)件人是“npm, Inc.”蜂科，點(diǎn)擊郵件中的鏈接就可以激活賬戶了顽决。
登錄賬號(hào)，點(diǎn)擊右上角的頭像崇摄，選擇“Create an Organization”擎值，就可以創(chuàng)建你自己的組織了。
組織有兩種選項(xiàng)逐抑，支持私有發(fā)布的需要繳納每月7刀的“管理費(fèi)”鸠儿，而我們現(xiàn)在只需要發(fā)布一個(gè)公共的包，那就可以選擇免費(fèi)版本厕氨。
本地命令行登陸npm
npm login
之后按提示輸入用戶名和密碼即可进每。
可以使用
npm whoami
來檢查登陸是否成功。如果成功的話命斧，這條命令會(huì)返回你的用戶名田晚。
給你的組件庫命名
你需要給你的這個(gè)組件庫起一個(gè)名字，這里用到的是package.json中的name字段国葬。注意@后的名稱就填寫你剛剛創(chuàng)建的組織的名稱贤徒。
{
"name": "@abc/my-banner"
}
最終步驟：再次構(gòu)建與發(fā)布
最后芹壕，使用yarn package重新構(gòu)建一遍這個(gè)組件庫，然后使用：
npm publish --access public
來發(fā)布這個(gè)組件庫接奈。
注意這里可能會(huì)報(bào)下面的錯(cuò)誤
npm ERR! This package has been marked as private
npm ERR! Remove the 'private' field from the package.json to publish it.
解決辦法很簡單踢涌，按照提示刪除package.json中的private字段，或?qū)⑵湓O(shè)置為false都可以序宦。
成果
順利發(fā)布后睁壁，就可以在你的組織頁面看到剛剛發(fā)布的這個(gè)包了。
在此之后互捌，你可以新建一個(gè)項(xiàng)目潘明，然后
yarn add @abc/my-banner
來把你剛剛發(fā)布的這個(gè)包添加為依賴項(xiàng)。由于我們之前已經(jīng)在src/components/index.js中對(duì)組件進(jìn)行了全局注冊秕噪，所以你現(xiàn)在可以直接在template中調(diào)用<Banner>钳降。
總結(jié)
以上，我們就從零開始實(shí)現(xiàn)了一個(gè)Vue組件在npm上發(fā)布的流程巢价，是不是很簡單呢牲阁？那么，現(xiàn)在就開始發(fā)布一個(gè)你自己的組件吧壤躲！
參考文章
How to create and publish your own VueJS Component library on NPM using @vue/cli 3.0
