溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章將為大家詳細講解有關如何自定義vue組件發布到npm，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。
具體如下：
為什么會有這個想法呢，主要是vue項目中自定義的組件在多個項目中使用。導致修改bug的時候，總是要在項目分支中修改，然后同步到主線上，這樣容易導致分支修改后沒有同步到主線，慢慢的就會導致組件版本不統一，而導致升級組件很繁瑣，最后可能都要去維護多個組件的不同版本，這樣不是我們想要的。
所以就打算將組件打包發布到npm上，每個項目中只需要在package.json中修改組件版本即可同步最新版本。
組件發布歷程
1、開始對打包不是很了解，只是簡單的將原有.vue文件以及相關的css、image資源進行提取，然后放到一個項目下，下面是發布組件到npm的詳細步驟：
（1）新建組件項目，通過npm init來初始化一個package.json文件
（2）將提取出來的組件放到項目路徑。
（3）在package.json所在目錄，執行npm adduser。這里需要注冊npm帳號
（4）然后要求輸入用戶名、密碼、注冊時填的郵箱。如圖：
（5）然后輸入npm publish即可。
如果不出以外，組件就已經發布成功了，可以通過npm install xxxx來進行安裝了。
2、在使用過程中發現了一些小問題。由于當時在index.js中使用了es6的部分語法（如：數組的map、const），導致在低版本ie中會報錯，雖然可以通過修改js來解決。但是作為一個有理想有抱負的碼農，這種事情不能忍，因為想element-ui這些組件都是可以將.vue文件打包之后發布的。然后就想著也要弄好了。
3、然后就開始研究怎么能通過import xx from xxx即可實現加載打包后的js。通過查找資料，發現是通過package.json中有個main屬性來設置加載js的路徑。如圖：
4、加載問題解決了，剩下就是打包問題了。由于打包需要一些webpack的配置，所以直接用vue-cli初始化了一個工程，對其中的webpack進行調整。主要是去掉build中打包配置文件webpack.prod.conf.js，這里去掉HtmlWebpackPlugin等。
關于“如何自定義vue組件發布到npm”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
