前言
項(xiàng)目中因?yàn)樵O(shè)計(jì)風(fēng)格双炕、項(xiàng)目模式有很多相似的組件模塊，每次都要做抽離汁汗、復(fù)制衷畦、粘貼，作為項(xiàng)目負(fù)責(zé)人知牌，總是想把相似模塊抽離出來(lái)作為公共模塊祈争，所以就有了把這些模塊都扔到npm上的想法，網(wǎng)上呢角寸，也有好多文章講解這個(gè)東西菩混，但是都會(huì)有一些自己上手的過(guò)程中遇到卡殼的細(xì)節(jié)問(wèn)題，所以我找了一個(gè)最清晰也最小白的教程扁藕，按照大佬教程一步步手操將每個(gè)環(huán)節(jié)自己的問(wèn)題都寫(xiě)出來(lái)沮峡，以供大家參考，要是寫(xiě)的有些不是很到位的解釋呢亿柑，還請(qǐng)多多見(jiàn)諒邢疙。大家也可直接移往大佬教程原出處！
1. 環(huán)境準(zhǔn)備
因?yàn)槲覀兎庋b的是Vue組件，所以我們直接在Vue腳手架項(xiàng)目里面直接進(jìn)行封裝即可秘症。
（1）在終端初始化項(xiàng)目
vue create my-app
（2）運(yùn)行項(xiàng)目
yarn serve
2. 組件封裝
2.1 新建package文件夾
因?yàn)槲覀兛赡軙?huì)封裝多個(gè)組件照卦，所以在src下面新建一個(gè)package文件夾來(lái)存放所有需要上傳的組件。
這里我封裝了一個(gè)hy-card組件
2.2 編寫(xiě)組件代碼
這里以hy-card組件為例乡摹，編寫(xiě)代碼役耕，代碼如下：
// package/hy-card/index.vue
<template>
<div class="hy-card">
這是測(cè)試卡片
</div>
</template>
<script>
export default {
name: 'hy-card'. // 組件名
}
</script>
<style scoped>
.hy-card{
width: 200px;
height: 200px;
box-shadow: 0px 0px 12px rgba(0, 0, 0, .12);
background: #fff;
line-height: 200px;
text-align: center;
margin: 20px auto;
}
</style>
然后我們引入到 App.vue 組件驗(yàn)證一下，看組件是否能用聪廉，代碼如下：
// App.vue
<template>
<div id="app">
<hyCard></hyCard>
</div>
</template>
<script>
import hyCard from './package/hy-card'
export default {
name: 'App',
components: {
hyCard
}
}
</script>
<style>
</style>
最后啟動(dòng)頁(yè)面顯示的效果如下：
2.3 使用Vue插件模式
這一步封裝組件中的重點(diǎn)瞬痘，用到了Vue提供的一個(gè)公開(kāi)方法：install。這個(gè)方法會(huì)在你使用 Vue.use(plugin) 時(shí)被調(diào)用板熊，這樣使得我們的插件注冊(cè)到了全局框全，在子組件的任何地方都可以使用。
在package目錄下新建index.js入口文件干签，代碼如下：
// package/index.js
import hyCard from './hy-card/index.vue' // 引入封裝好的組件
const coms = [hyCard] // 將來(lái)如果有其他組件津辩，都可以寫(xiě)到這個(gè)數(shù)組里面去
// 批量組件注冊(cè)
const install = function(Vue) {
coms.forEach((com) => {
Vue.component(com.name, com)
})
}
export default install // 這個(gè)方法以后再使用的時(shí)候可以被 use 調(diào)用
還有另外一種動(dòng)態(tài)引入組件的方法
// 另一種方法 動(dòng)態(tài)引入文件
const requireComponent = require.context('./', true, /\.vue$/)
const install = (Vue) => {
if(install.installed) return
// requireComponent.keys() => 數(shù)組
requireComponent.keys().forEach(fileName => {
// 每一個(gè)組件
const config = requireComponent(fileName)
// 組件名
const componentName = config.default.name
Vue.component(componentName, config.default || config)
})
// 全局自定義指令
Vue.directive('focus', {
inserted: function(el) {
el.focus()
}
})
}
// 環(huán)境檢測(cè)
if(typeof window !== 'undefined' && window.Vue) {
install(window.Vue)
}
export default {
install
}
上傳代碼主要的一項(xiàng)工作就是將我們封裝好的組件組冊(cè)為全局組件，用到了Vue.component()方法容劳，當(dāng)使用Vue.use()時(shí)喘沿，我們的install方法便會(huì)執(zhí)行。
3. 組件打包
到這里為止竭贩，我們的組件封裝基本就玩成了蚜印，如果后續(xù)有復(fù)雜的需求封裝土辩，都可以繼續(xù)修改擂涛。
修改我們項(xiàng)目的package.json文件，配置打包命令：
"package": "vue-cli-service build --target lib ./src/package/index.js --name hy-ui --dest hy-ui"
打包命令解釋：
- --target lib 關(guān)鍵字 指定打包的目錄
- --name 打包后的文件名字
- -- dest 打包后的文件夾的名稱
然后執(zhí)行打包命令：
yarn package
打包執(zhí)行完成后我們項(xiàng)目目錄下就會(huì)多出來(lái)一個(gè)hy-ui文件夾嫂便，存放的是打包后的文件楼熄。
4. 發(fā)布到npm
4.1 初始化 package.json
想要發(fā)布到npm倉(cāng)庫(kù)忆绰，我們還得在hy-ui文件夾下初始化一個(gè)package.json文件，進(jìn)入hy-ui目錄孝赫，執(zhí)行命令：
npm init -y
注意：這兒會(huì)導(dǎo)致后續(xù)發(fā)布失敗報(bào)錯(cuò)
402 Payment Required - PUT https://registry.npmjs.org/xxx - You must sign up for private packages
這個(gè)意思是說(shuō)明我們要發(fā)布的是私有包较木，因?yàn)閕nit之后沒(méi)有private這個(gè)屬性，但是我們想要發(fā)布公開(kāi)的青柄，所以這個(gè)屬性改為false就行，或者增加publishConfig這個(gè)屬性预侯，也是我們的包更改為公開(kāi)屬性的意思致开。
由于我們這兒只是測(cè)試，所以我不需要更改package.json文件萎馅，如果是生產(chǎn)的話双戳，最好加上版本描述和版本號(hào)等等，其中name字段便是我們上傳到npm倉(cāng)庫(kù)后的名稱糜芳。
4.2 發(fā)布到 npm 倉(cāng)庫(kù)
（1）注冊(cè)賬號(hào)
想要發(fā)布到npm倉(cāng)庫(kù)飒货，就必須要有一個(gè)賬號(hào)魄衅，先去npm官網(wǎng)注冊(cè)一個(gè)賬號(hào)，注意記住用戶名塘辅，密碼和郵箱晃虫，發(fā)布的時(shí)候可能會(huì)用得到。
（2）設(shè)置npm源
有些小伙伴可能本地的npm鏡像源采用的是淘寶鏡像源或者其他的扣墩，如果想要發(fā)布npm包哲银，我們得把npm源切換為官方的，命令如下：
// 查看當(dāng)前鏡像源
npm config get registry
// 切換鏡像源
npm config set registry https://registry.npmjs.org
（3）添加npm用戶
如果是新用戶呻惕，則進(jìn)入hy-ui目錄荆责，添加npm用戶，執(zhí)行命令：
npm adduser // 這里會(huì)讓你填寫(xiě)用戶名等等亚脆，如果之前設(shè)置過(guò)即可跳過(guò)此步做院。
如果之前發(fā)布過(guò)，則執(zhí)行登錄命令
npm login // 也是會(huì)讓你填寫(xiě)用戶名濒持、密碼键耕、郵箱、郵箱一次性密碼
（4） 發(fā)布npm
在hy-ui目錄下執(zhí)行命令：
// 如果是mac電腦發(fā)布失敗有可能是權(quán)限問(wèn)題 使用 sudo npm publish
npm publish
如果發(fā)布失敗可能是名字重復(fù)了弥喉，改了名字即可郁竟，發(fā)布成功后，我們即可到npm官網(wǎng)上查看自己發(fā)布的npm包：
5. 從npm安裝使用
直接執(zhí)行安裝命令：
yarn add @zzxhy/hy-ui // 為了防止重復(fù)由境，使用npm賬號(hào)+到處文件夾名稱作為包名棚亩，對(duì)應(yīng)的是上面package.json里面的name
然后在main.js 引用注冊(cè)，代碼如下：
import HyUi from '@zzxhy/hy-ui'
import "@zzxhy/hy-ui/hy-ui.css"
Vue.use(HyUi)
這里單獨(dú)引用了css虏杰，就和element-ui一樣需要單獨(dú)引用樣式文件
因?yàn)槭侨肿?cè)讥蟆，所以在App.vue里面可以直接使用：
如果全局注冊(cè)頁(yè)面效果不顯示，原因很可能是把引用的時(shí)候標(biāo)簽名和變量名混淆了纺阔，全局注冊(cè)和局部注冊(cè)的區(qū)別是全局注冊(cè)時(shí)的name就是組件的標(biāo)簽名
而局部祖冊(cè)是使用變量名作為標(biāo)簽名
所以應(yīng)該是全局注冊(cè)的名字和你使用的標(biāo)簽名不一致導(dǎo)致的
到這里我們的組件簡(jiǎn)易封裝并且發(fā)布到npm上去了瘸彤，后續(xù)要是持續(xù)更新，記得更改版本號(hào)笛钝，要是自己只是做的測(cè)試包质况，等待流程測(cè)試成功以后記得72小時(shí)內(nèi)刪除測(cè)試包，否則之后無(wú)法刪除玻靡。
npm unpublish 命令只能刪除 72 小時(shí)以內(nèi)發(fā)布的包
npm unpublish 刪除的包结榄，在 24 小時(shí)內(nèi)不允許重復(fù)發(fā)布
發(fā)布包的時(shí)候要慎重，盡量不要往 npm 上發(fā)布沒(méi)有意義的包囤捻！
