乐趣区

elementUI源码修改的爬坑之旅

今天由于项目需要,想在 Tree 组件的前面增加一个 icon 图标,根据不同类型增加不同的图标,我修改了 elementUI 的源代码,发布到 npm 上去成功使用,记录下过程中所碰到的问题,首先看下最后的效果:
下面简单记录下过程和过程中所遇到的问题以及问题的解决方案。
首先把 elementUI 的项目从 git 上克隆下来:
git clone https://github.com/ElemeFE/element.git
克隆完成后就会看到有个名叫 element 的文件夹出现:
然后进入 element 文件夹:
cd element
安装相关的依赖:
npm install
第一步已经完成。
修改源码,我修改的部分在 packages 里面,
我修改完成后执行:
npm run dist
就会生成一个 lib 文件夹,这部分是我们调试用的,刚克隆下来没有 run dist 之前是没有 lib 文件夹的,我修改完源码之后, 运行 run dist 后将生产的 lib 文件夹拷贝到项目中的 node_modules 中的 element-ui 文件夹中去,效果 OK。3. 上传 npm 包。第一次是在网上看大佬说只需要修改里面的 config.js 文件里面的名字和 package.json 里面的包名就可以了,我修改了之后上传后结果是报了 40 多个路径错误,找不到这个找不到那个,看的我是一脸懵。然后我的解决方案是全局全词匹配到 element-ui 之后进行全局替换为我设置的包名。说下上传包步骤,首先进入 element 文件夹之后执行:
npm init
然后登陆下(没有账户的注册账户):
npm login
依次根据提示输入 username、password、e-mail 其他的都可以敲回车完事(记得改 element 文件夹中 package.json 文件中的包名和版本号啊)。需要强调的是包名不能重复,不然 npm 会给你报一堆乱七八糟的错误。最后进行上传:
npm publish
ok 上传完成(要是报各种看不懂的错误很大可能是包名重复)。4. 到项目中将项目中的 package.json 中的 dependencies 中的:”element-ui”: “^2.4.11″ 修改为:” 你的包名 ”: “^ 你的版本号 ”。然后进行依赖安装:npm install 启动项目,效果 OK。有不对的地方,各位路过的大佬多多指教。

退出移动版