element-ui如何初始化组件？

「我正在参与掘金会员专属活动-源码共读第一期，点击参与」

本篇文章介绍的是element-ui如何初始化新的组件？

源码下载

git clone https://github.com/ElemeFE/element.git
cd element && npm run dev

初始化组件

路径：element/build/bin/new.js

源码解析

1. 首先从命令行中解析中参数componentname和chineseName.
2. 获取packages文件夹的绝对路径
3. 声明新组件的模板Files：由文件名和内容content组成
   • index.js : 新组件入口
   • *.md: 国际化说明文档
   • src/main.vue：新组件的声明文件
   • /test/unit/specs: 新组件的测试用例文件
   • /theme-chalk/src: 新组件的样式文件
   • /types: 新组件类型声明文件
4. 读取components.json，根据传入新组件名称判断组件是否存在，存在则退出进程，如果不存在则将其组件名和组件的路径写入components.json文件。
5. 找到样式文件入口index.scss，将组件样式的导入语句写入
6. 找到组件类型声明文件入口，将新组件的类型声明文件导入语句写入
7. 遍历Files开始写入新组件的模板
8. 找到nav.config.json导航配置文件，在zh-CN语言中将新组件的配置增加进去。
9. 至此整个初始化组件就全部完毕。

结束语

初始化组件主要做了几件事：

• 初始化组件需要创建的文件路径和内容（模板）
• 然后就做入口文件和配置文件更新，将新组件引入进去
• 接着就是写入模板文件
• nav.config.json文档的导航配置文件

用于自己的项目的话，可以根据自身项目结构，来适当做删减和新增。使用命令来初始化新的业务模块的页面还是很省时省力的，而不需要将其他的业务模块页面代码复制过来，做一些不需要代码的删删减减。在工作中提升了效率，在简历中成为了亮点。