-
在packages文件夹下添加组件目录，添加组件相关的单文件组件及输出文件。
image.png
image.png
image.png 在packages/theme-chalk/src下添加组件对应的scss文件。
image.png
将暴露出来的主题变量提取至packages/theme-chalk/src/common/var.scss,也可使用popup.scss和transition.scss做对应的变量提取。
-
packages/theme-chalk/src/index.scss添加对应组件的scss引入。
image.png -
src/index.js添加组件引用。
image.png -
components.js添加对应配置。
image.png -
types下添加对应的ts,用于控制参数等相关类型约束。
image.png -
types/element-ui.d.ts添加组件对应的ts引入。
image.png -
test/unit/specs下添加对应的测试用例。
image.png 运行自动化测试，检查单元测试的运行情况。
npm run test
image.png
- examples/nav.config.json下添加文档目录配置。
-
examples/docs/zh-CN添加对应组件的Markdown说明，其他语言的可选择对应语言的文件夹。
13.推到npm，更新本地依赖，使用该组件。
image.png
14.组件页面效果
image.png
这样一个基本组件的添加和使用就完成了。
