為什麼會有這個想法呢，主要是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 ***x來進行安裝了。
2、在使用過程中發現了一些小問題。由於當時在index.js中使用了es6的部分語法（如：陣列的map、const），導致在低版本ie中會報錯，雖然可以通過修改js來解決。但是作為乙個有理想有抱負的碼農，這種事情不能忍，因為想element-ui這些元件都是可以將.vue檔案打包之後發布的。然後就想著也要弄好了。
3、然後就開始研究怎麼能通過import xx from ***即可實現載入打包後的js。通過查詢資料，發現是通過package.json中有個main屬性來設定載入js的路徑。如圖：
4、載入問題解決了，剩下就是打包問題了。由於打包需要一些webpack的配置，所以直接用vue-cli初始化了乙個工程，對其中的webpack進行調整。主要是去掉build中打包配置檔案webpack.prod.conf.js，這裡去掉htmlwebpackplugin等。
這裡是示例，該專案只是乙個demo。
將自定義的vue元件發布到npm
一.建立元件並配置 1.通過vue腳手架的簡易版vue init webpack 命令建立乙個vue工程 前面的部落格有 2.寫好自己的元件，並做好配置 專案結構如圖 1 說明 src下的index.js是專案的入口檔案 改了配置檔案 demo1資料夾表示乙個元件的分類 demo1下的index.j...
在NPM發布自定義元件
1 首先登入 npm官網 註冊個賬戶並登入 2 自己先建立乙個資料夾執行 npm init yes 3 執行npm publish 新建乙個vue專案 vue create my project cd my project npm run serve 修改檔案目錄 1 在src目錄下新建compon...
vue元件發布到npm，類似element ui
1.建立webpack 類專案 vue init webpack demo 2.目錄 3.編寫元件 packages timer就是編寫的元件，跟普通元件無差別，這裡只是用於測試 4.修改package.json 畫紅線部分即是需要修改或新增的內容 5.修改webpack.config.js 畫橢圓...