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


  兩年多的彷徨、迷茫。最終又回歸初心,回歸前端開發。這次部門給我安排的任務是,做一個公司自己的組件庫。計划爭取把做組件庫的每個關鍵過程 記錄下來,給 大家,給 自己 提供有用的幫助。

  不多說了,切入正題。

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

  先說思路了,最初的思路是,先把element-ui 組件庫下載來,修改其中的組件——然后 打包——放到 npm上——在其他項目中使用。 如果能實現,那么接下來就 慢慢做組件就行了,可用性就得到驗證了。

 

1、 先在git 上找到elemen-ui 的 源碼,並 fork 到自己的 git里。 附上git 地址:  https://github.com/ElemeFE/element

 

 

 

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

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

 

 

3、修改完成了,讓我們 打包。(npm上不需要包名重復,包括不能和別人的包名重復,所以記得把包名都改了)

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

      還要記得,項目中 全盤替換 ,把  element-ui ,改成 test-element2  (我們自己的名字)

 

 

 

 

 

4、 打包 , npm run dist

 

 

 

 5、 成功后,開始 上傳 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‘已經在包管理器已經存在被別人用了,需要更該包名稱 (看上述第三步)

       

 

 

 

 

6、 在我們 自己的 npm 上 就能 看到了

 

 

7、 我們再 建一個項目(test-vue),把 我們的 新包 (test-element2)  引入 測試成功(npm install test-element2 --save)。

 

    

 

  

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM