在elementUI中添加一个组件

1. 在packages文件夹下添加组件目录，添加组件相关的单文件组件及输出文件。

   
   
   

   image.png
   
   
   

   image.png
   
   
   

   image.png

2. 在packages/theme-chalk/src下添加组件对应的scss文件。

image.png

3. 将暴露出来的主题变量提取至packages/theme-chalk/src/common/var.scss,也可使用popup.scss和transition.scss做对应的变量提取。

4. packages/theme-chalk/src/index.scss添加对应组件的scss引入。

   
   
   

   image.png

5. src/index.js添加组件引用。

   
   
   

   image.png

6. components.js添加对应配置。

   
   
   

   image.png

7. types下添加对应的ts,用于控制参数等相关类型约束。

   
   
   

   image.png

8. types/element-ui.d.ts添加组件对应的ts引入。

   
   
   

   image.png

9. test/unit/specs下添加对应的测试用例。

   
   
   

   image.png

10. 运行自动化测试，检查单元测试的运行情况。

npm run test 

image.png

11. examples/nav.config.json下添加文档目录配置。

12. examples/docs/zh-CN添加对应组件的Markdown说明，其他语言的可选择对应语言的文件夹。
    13.推到npm，更新本地依赖，使用该组件。

    
    
    

    image.png
    
    

    14.组件页面效果

    
    
    

    image.png
    
    这样一个基本组件的添加和使用就完成了。