Element组件二次开发及使用的过程记录

2018-12-19 本文已影响0人彩云Coding

修改Element源码的完成过程：

第一步：Fork一份Element的dev源码到自己的github上面，作为以后的开发基础版本。

第二步：将Element的源码从自己的github上面clone下来，做二次开发

<1>git clone git@github.com:yunchai/element.git

element01.png

<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文件夹

element02.png

第五步：提交自己二次开发之后的代码到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组件安装到这个项目里面。