组件库的使用与自定义组件｜ 青训营笔记

快醒醒鸭今天你编程了吗
107 阅读1分钟

今天学习了组件库的使用与自定义组件的一些知识，老师讲的也很丰富和认真清楚，对我了解这部分的知识也有了一个深刻的认识。

首先介绍了arco.design组件库 image.png

image.png

快速上手 - 引入组件库

image.png

image.png 这些组件库干了什么呢？就是将我们刚才写的代码编译为按需引用的形式，从上面的图来说将一行代码编译成为下面的两行代码。主要就是未被使用的代码打包到js文件中去。

image.png

主题指定 - CSS覆盖

image.png

主题定制 - Less 变量

image.png

主题定制 - 组件定制

image.png

快速上手 - Arco Pro

image.png

主题定制 - DesignLab

image.png 通过Arco插件引入

image.png

暗黑模式 - 局部应用暗色模式

image.png

国际化 - 语言国际化

image.png

image.png 源代码

image.png

image.png

国际化 - RTL视图实现浅析

image.png

ConfigProvider - 全局配置组件默认属性

image.png

image.png

ConfigProvider

image.png

搭建组件库

image.png 搭建初期的问题如下：

image.png

搭建组件库 - 架构设计

image.png

image.png

image.png

搭建业务组件库 - 多包架构

image.png

搭建业务组件库 - 技术方案

image.png

搭建业务组件库 - 对外文档

image.png

组件开发 - 什么是好的组件？

image.png 如下总结：

image.png

组件开发 - 项目组织 Good VS Bad

image.png

image.png

image.png

image.png

总结

组件库的使用：

  • 组件库的引入
  • 主题定制
  • 亮/暗色模式切换
  • 国际化
  • 自定义组件默认配置

自定义组件开发

  • 单包架构和多包架构
  • 什么是好的组件
  • 组件开发规范
  • 组件快速托管
avatar
文章
阅读
粉丝