Element Ui 源码本地化修改使用

一、获取源码：

先创建要保存源码的文件夹，进入该文件夹

使用 git clone https://github.com/ElemeFE/element.git

把Element Ui 的源码 克隆到本地，会发现当前文件夹下生成了一个element目录，这就是克隆到本地的源码了。

 

二、安装依赖

进入 element目录， 命令行终端 运行  npm install 。

这样 依赖包安装按成。

 

三、打包

在当前目录命令行终端执行 npm run dest ,执行完成后当前目录多了一个 lib文件夹。这个文件夹中的文件就是打包后的组件及样式，和我们使用npm install element-ui下载下来的依赖包中的lib文件夹内容相同，也就是我们使用时引用的资源。

 

四、本地调试

当前目录命令行终端 执行 npm run dev:play 启动本地的服务。

启动对应 examples/play/index.vue文件。可以在这个文件中随意引入组件进行调试。

packages文件夹中存放的就是各种组件源码，可以根据需要去进行修改，修改完成后重新执行npm run dist就会重新打包，覆盖lib文件夹。

/packages/theme-chaik下是elementUI各个组件的样式文件，源码中样式采用sass进行预编译，所以如果要修改源码样式就需要在src文件夹下找到相应的样式进行修改，修改完成后在theme-chalk文件夹下， npm install安装以来，安装完后使用npm run build对样式进行编译和打包，（样式打包使用的是gulp工具），打包后文件会覆盖theme-chalk下的lib文件夹。

    修改完逻辑和样式，并对样式文件进行重打包后，返回根目录下npm run dist即可打包生成最后的文件。完成后将根目录下lib文件夹替换自己项目中/node_module/element-ui/lib即可。

 

五、项目中引入

在main.js中 加入

import ElementUIN from '@/../native_modules/element/lib/index.js';  //（我在项目根目录建立了native_modules，把element目录存放 在其中）

Vue.use(ElementUIN);

 

这样从修改 到 打包 然后 引用到项目中的流程已经完成。欢迎 大家一起讨论。