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

组件库的使用与自定义组件|青训营笔记 组件库介绍-什么是组件？ 在计算机中，软件组件就相当于可复用的程序“零部件” 常用组件库：Material-UI、Ant Design arco design 组件库一定要保证在不同环境下的一致性和高效率。 下面以一个项目的搭建来学习如何使用组件库 快速上手-引入组件库 以下默认在react框架下进行引用 1.引用arco design组件库 npm i @arco-design/web-react 同时要在配置文件中进行对应的引用 import @arco-desgin/web-rect/dist/css/arco.css等等 之后按照需要和react语法引用自己想用的组件，自己开发时，可以直接去官方文档引用，使用起来更加方便。 按需加载插件babel-plugin-import 安装 npm add babel-plugin-import -D 同时按照官方文档进行babel配置 按需引用可以大大降低组件所占空间，只有自己用到的组件才会占据空间。同时也可以用CDN使用组件库。 在实际开发中，组件库中的组件可能不能完全满足开发需求，可以自己在less中或者直接在组件中修改 举例：日间模式夜间模式的切换 写好两个模式的css变量，根据按钮点击事件来进行css样式的切换。 语言国际化：写好每个语言对应的文本，做好每种语言的引用，根据用户切换事件，用条件控制语言之间的切换 自定义组件 搭建业务组件库：将需要多次复用的组件搭建为通用业务组件库，实现代码的多次复用，加快业务开发效率。 多包架构：所有的组件在一个仓库里，组件之间单独发包。 优点：单独发包，升级灵活。 在同一仓库下，便于代码管理，使用者无需考虑按需加载。 缺点：组件间相互依赖时，需要通过npm包引入。 组合使用时，需要安装每一个用到的npm包。