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）。