zoukankan      html  css  js  c++  java
  • 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)。

        

      

  • 相关阅读:
    基于visual Studio2013解决C语言竞赛题之1074八皇后
    Bit,Bytes,KB,MB,GB,TB,PB,EB,ZB,YB
    RFID系统的选择
    java中复制文本文件
    java中复制文本文件
    数据筛选和排序
    实现Windows程序的数据绑定
    实现Windows程序的数据更新
    使用ListView控件展示数据
    构建良好的windows程序
  • 原文地址:https://www.cnblogs.com/tlsmile/p/13274162.html
Copyright © 2011-2022 走看看