1． 新建專案建議使用vue init webpack-simple projectname，為什麼呢?因為這樣建立的專案webpack只需要關注webpack.config.js這個配置檔案，當然大佬隨意，不過大佬也不會看我這部落格。。。。

2 . 新建好專案後就進行正常的vue元件開發就好了，在此我製作的是ui外掛，所以我的專案是沒有使用router和vuex的，eslint也沒用

1.1. 外掛打包

我使用的webpack打包工具，如果對webpack工具不瞭解的小夥伴可以去官網瞭解一下。我簡單說一下我的理解：webpack就是通過專案中的引用（import * from XXX），把需要的引用找來，
然後就是程式碼壓縮，所以需要一個入口（就是webpack開始從這個檔案找其中引用的檔案），出口就是打包的方式和檔案存放的位置。

那麼問題來了，vue入口檔案的程式碼如何設定呢？有沒有特定格式呢？當然有

就是vue提供了外掛載入的方式，如上圖給js物件屬性install裝載函式，到時候通過Vue.Use方法使用。

就是這麼簡單 vue 就打包好了。

問題：因為我製作的ui元件是在element-ui基礎上封裝了一層的，然後其中引用的elment的css和js包，打包的時候報錯，把對應的import刪除即可，後續使用自制外掛的專案引用elementui即可。（為什麼報錯，在下懶得去找了，找到的小夥伴可以告訴我）

2.3. 本地包測試

打包好的包需要進行本地測試，這就有一個坑爹問題了。

先說一下在下的操作吧，打包完成後我直接將打好的包複製到src檔案中，然後通過import方式引用

然後就出現了上面的問題，所以呢？

但是但是但是我把外掛推送到npm上面，然後下載引用則沒有這個問題。

我找不到問題啊！然後就找找，然後就找到了這篇部落格https://juejin.cn/post/6844903826592366600 強烈建議給作者點贊！

簡單點解釋就是node_modules中的檔案進行載入的時候中間都會通過 label進行轉換成es6 中 import的模式，具體的可以去了解 umd，amd，cmd，commonjs等，
因為我們使用的webpack打包的是umd的模式，所以我們需要外掛轉碼一下就行。

解決辦法：

babel.config.js檔案中新增

plugins: ["@babel/plugin-transform-modules-umd"]

如果你的專案中中沒有babel.config.js檔案，建議通過腳手架新建一個專案進行測試，因為我不想去找對應的配置檔案。

命令 vue create projecttestname,然後外掛手動選擇一個label就行了，建議不要選eslint，就選了之後專案執行一直卡在40%。測試完成後就可以上傳npm了。

補充：我如果沒有使用使用npm的框架呢，就是引用vue.js包進行開發，那麼需要去網上找對應的 umd 載入的js外掛，列如 sea.js .require.js

或者直接外掛入口中：

其實就是把 Vue.Use()這個方法提前了。

然後直接

就行了！

2.4 Npm釋出

網上很多部落格，自己找找

本人非專業前端，部落格寫的垃圾請輕噴！