這篇文章將為大家詳細(xì)講解有關(guān)如何自定義vue組件發(fā)布到npm，小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

創(chuàng)新互聯(lián)建站是一家專業(yè)提供瓊海企業(yè)網(wǎng)站建設(shè),專注與網(wǎng)站設(shè)計(jì)制作、成都網(wǎng)站制作、H5響應(yīng)式網(wǎng)站、小程序制作等業(yè)務(wù)。10年已為瓊海眾多企業(yè)、政府機(jī)構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專業(yè)的建站公司優(yōu)惠進(jìn)行中。

具體如下：

為什么會(huì)有這個(gè)想法呢，主要是vue項(xiàng)目中自定義的組件在多個(gè)項(xiàng)目中使用。導(dǎo)致修改bug的時(shí)候，總是要在項(xiàng)目分支中修改，然后同步到主線上，這樣容易導(dǎo)致分支修改后沒(méi)有同步到主線，慢慢的就會(huì)導(dǎo)致組件版本不統(tǒng)一，而導(dǎo)致升級(jí)組件很繁瑣，最后可能都要去維護(hù)多個(gè)組件的不同版本，這樣不是我們想要的。

所以就打算將組件打包發(fā)布到npm上，每個(gè)項(xiàng)目中只需要在package.json中修改組件版本即可同步最新版本。

組件發(fā)布?xì)v程

1、開(kāi)始對(duì)打包不是很了解，只是簡(jiǎn)單的將原有.vue文件以及相關(guān)的css、image資源進(jìn)行提取，然后放到一個(gè)項(xiàng)目下，下面是發(fā)布組件到npm的詳細(xì)步驟：

（1）新建組件項(xiàng)目，通過(guò)npm init來(lái)初始化一個(gè)package.json文件
（2）將提取出來(lái)的組件放到項(xiàng)目路徑。
（3）在package.json所在目錄，執(zhí)行npm adduser。這里需要注冊(cè)npm帳號(hào)
（4）然后要求輸入用戶名、密碼、注冊(cè)時(shí)填的郵箱。如圖：

（5）然后輸入npm publish即可。

如果不出以外，組件就已經(jīng)發(fā)布成功了，可以通過(guò)npm install xxxx來(lái)進(jìn)行安裝了。

2、在使用過(guò)程中發(fā)現(xiàn)了一些小問(wèn)題。由于當(dāng)時(shí)在index.js中使用了es6的部分語(yǔ)法（如：數(shù)組的map、const），導(dǎo)致在低版本ie中會(huì)報(bào)錯(cuò)，雖然可以通過(guò)修改js來(lái)解決。但是作為一個(gè)有理想有抱負(fù)的碼農(nóng)，這種事情不能忍，因?yàn)橄雃lement-ui這些組件都是可以將.vue文件打包之后發(fā)布的。然后就想著也要弄好了。

3、然后就開(kāi)始研究怎么能通過(guò)import xx from xxx即可實(shí)現(xiàn)加載打包后的js。通過(guò)查找資料，發(fā)現(xiàn)是通過(guò)package.json中有個(gè)main屬性來(lái)設(shè)置加載js的路徑。如圖：

4、加載問(wèn)題解決了，剩下就是打包問(wèn)題了。由于打包需要一些webpack的配置，所以直接用vue-cli初始化了一個(gè)工程，對(duì)其中的webpack進(jìn)行調(diào)整。主要是去掉build中打包配置文件webpack.prod.conf.js，這里去掉HtmlWebpackPlugin等。

關(guān)于“如何自定義vue組件發(fā)布到npm”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。