element-ui組件庫二次開發——打包、上傳npm

  兩年多的彷徨、迷茫。最終又迴歸初心，迴歸前端開發。此次部門給我安排的任務是，作一個公司本身的組件庫。計劃爭取把作組件庫的每一個關鍵過程 記錄下來，給 你們，給 本身 提供有用的幫助。

  很少說了，切入正題。

  提到組件庫，最早想到的就是element-ui, 我也是先那 它 作的demo實現。

  先說思路了，最初的思路是，先把element-ui 組件庫下載來，修改其中的組件——而後 打包——放到 npm上——在其餘項目中使用。 若是能實現，那麼接下來就 慢慢作組件就好了，可用性就獲得驗證了。

 

一、 先在git 上找到elemen-ui 的 源碼，並 fork 到本身的 git裏。 附上git 地址:  https://github.com/ElemeFE/element

 

 

 

2. 修改elemen-ui 中的 input 組件，給 area 添加 長度500的限制，maxlength。 

   在 element-ui 下的  packages 中 找到 input 組件修改

 

 

三、修改完成了，讓咱們 打包。（npm上不須要包名重複，包括不能和別人的包名重複，因此記得把包名都改了）

      我這兒，都給 起了個名字——test-element2

      還要記得，項目中 全盤替換 ，把  element-ui ,改爲 test-element2  （咱們本身的名字）

 

 

 

 

 

四、 打包 ， npm run dist

 

 

 

 五、 成功後，開始 上傳 npm 

　　（1） 咱們須要先 在 npm 上 申請帳號，跟 其餘的帳號申請同樣。 （npm官網地址：   https://www.npmjs.com/）

                  關鍵： 當申請完後，記得在  郵箱裏 激活 一下。否則 上傳 不成功。

      

 

 

     （2）  登陸npm， 並輸入 用戶名、密碼、郵箱。

     

 

 

　　注意：  上傳包前， 記得 把 淘寶映射 倉庫地址，改爲 npm 本身 倉庫地址。不然上傳 不上去。

      // 檢查倉庫是否被設成了淘寶鏡像庫(https://registry.npm.taobao.org/)
       npm config get registry

     // 若是設置了淘寶鏡像，執行如下命令
      npm config set registry=http://registry.npmjs.org

 

  （3） 而後，執行 npm publish ，就 會到 咱們 的 npm上了 

        

 

　　　　

　　　發包是，若是 報錯  注意：若是報錯：'You do not have permission to publish "mypackage1". Are you logged in as the correct user?'

　　　表示包’mypackage1‘已經在包管理器已經存在被別人用了，須要更該包名稱 （看上述第三步）

       

 

 

 

 

六、 在咱們 本身的 npm 上 就能 看到了

 

 

七、 咱們再 建一個項目（test-vue），把 咱們的 新包 (test-element2)  引入 測試成功（npm install test-element2 --save）。