修改Element源码的完成过程:
第一步:Fork一份Element的dev源码到自己的github上面,作为以后的开发基础版本。
源码的地址:https://github.com/ElemeFE/element.git
第二步:将Element的源码从自己的github上面clone下来,做二次开发
<1>git clone git@github.com:yunchai/element.git
<2>cd 项目目录
<3>不要使用npm install来安装依赖,因为Element的源码已经利用yarn将依赖的版本锁定,所以可以直接在项目的根目录执行命令:npm run dev就可以的,会自动利用yarn将所需的依赖安装下来
第三步:对源码进行二次开发
<1>对于页面内容的修改,去到packages\组件src\main.vue 做相应的修改
<2>对于样式的修改,去到packages\theme-chalk\src\组件名.scss 做相应的修改
第四步:查看自己修改后的效果
<1>去到examples\docs\zh-CN\组件名.md,按照自己的定义,修改一下,就可以在页面的相应的组件的例子中看到自己修改后的效果
第五步:生成lib文件夹,方面后面使用自己的代码
执行命令npm run dist之后就可以在项目的目录结构之中看到多出来的lib文件夹
第五步:提交自己二次开发之后的代码到git上面(这里需要注意的是lib文件也一定要上传)
git add .
git commit
git push
第六步:在自己的新的项目中使用自己git上面的经过自己二次开发之后的Element组件
<1>新建一个项目
<2>修改自己的packeg.json文件,在dependencies中新增element-ui这一项,指向自己的github地址(这里一定注意需指定分支或者tag号,默认是master)
"dependencies": {
"element-ui": "git+https://github.com/yunchai/element.git#dev"
},
<3>执行npm install,这样就可以将自己开发过的Element组件安装到这个项目里面。