arco-design|青训营笔记

THIM
978 阅读4分钟

暗黑模式

css 变量

  • var(--example)

什么是 css 变量

  • CSS 变量可以包含任何类型的值，包括颜色、字体、长度、百分比等
  1. 定义变量

使用 -- 开头的名称来定义变量，例如：

:root {
  --primary-color: #1890ff;
  --font-size: 14px;
}

其中 :root 选择器表示文档根元素，也就是 HTML 中的 <html> 标签

  1. 引用变量

使用 var() 函数来引用变量，例如：

button {
  color: var(--primary-color);
  font-size: var(--font-size);
}

引用了定义好的 --primary-color 和 --font-size 变量，将这些变量的值应用到了 button 元素中

  1. 改变变量的值

可以通过 JavaScript 来动态地改变变量的值，例如：

document.documentElement.style.setProperty('--primary-color', 'red');

使用 JavaScript 改变了 --primary-color 变量的值为红色

image.png

image.png

定义在全局的CSS变量

举例

分页选择器

image.png

分页选择器组件（Pagination Selector）是一种常见的 UI 组件，通常用于分页查询或者展示大量数据时，允许用户选择需要查看的页数或者数据量

引入后可以直接使用

import { useState } from 'react';  
import { Pagination, Radio } from '@arco-design/web-react';  
const RadioGroup = Radio.Group;  
  
function App() {  
const [size, setSize] = useState('default');  
return (  
<div>  
<RadioGroup  
value={size}  
options={['large', 'default', 'small', 'mini']}  
onChange={(value) => setSize(value)}  
type='button'  
style={{  
marginBottom: 20,  
}}  
/>  
<Pagination size={size} total={50} showTotal showJumper sizeCanChange />  
</div>  
);  
}  
  
export default App;
  • 函数式组件

国际化

  • LTR VS RTL

image.png

  • 在国际化中，最重要的是要考虑不同语言的阅读方向，尤其是从左到右（LTR）和从右到左（RTL）的方向
  • 这只是阅读习惯的改变，内容并没有差别

全局默认属性配置

一般来说，可以通过以下步骤来设置组件库的全局配置：

  1. 导入组件库的配置文件，一般是一个JavaScript模块。
  2. 调用组件库的配置方法，例如Vue.js中的Vue.use()方法，来应用全局配置。
  3. 在配置方法中，可以传递一个包含组件属性和对应值的对象，以设置默认属性。例如，可以设置组件的默认颜色、大小、字体等等。
  • 比如说下面是 arcodesign的全局配置教程：

step1 平台配置

使用风格配置平台进行相应的全局默认属性配置。

step2 发布主题包

配置完毕后，进行主题包的发布。主题包产物内包含了相关的配置文件。

step3 产物使用

安装最新版主题包后，从主题包中导入 componentConfig 配合 ConfigProvider 进行使用。

import { ConfigProvider } from '@arco-design/web-react';
import { componentConfig } from '@arco-design/theme-line/config'; // 此处需要配置为自己的主题包名

export default () => {
    return <ConfigProvider componentConfig={componentConfig}>
      {...}
    </ConfigProvider>
}

上面的configprovider怎么写可以参照：

image.png

代码迁移

什么是代码迁移？

  • 代码迁移是指将一个应用程序从一种编程语言、框架或平台迁移到另一种编程语言、框架或平台的过程
  1. 分析原应用程序的代码和架构，确定需要迁移的部分以及目标平台的技术栈。
  2. 编写迁移计划，包括时间表、资源需求、风险评估等等。
  3. 在目标平台上建立新的应用程序框架，包括新的编程语言、框架、库等等。
  4. 将原应用程序的代码进行修改，使其能够在新的平台上运行。这通常涉及到对代码进行重构、调试、测试等等。
  5. 迁移后进行测试和质量保证，确保新的应用程序可以正常运行并且满足预期的性能要求。

搭建业务组件

  • 将场景组件抽离到单独的仓库，进行集中维护
  • 提供更规范的接口定义
  • 更稳定的版本迭代
  1. 要进行业务调研
  • 单包架构？多包架构？

单包架构和多包架构是指前端项目代码的组织架构

在单包架构中，整个前端项目代码被组织在一个包中。这个包包含了所有的代码、组件、工具和配置文件。单包架构的优点是简单直观，易于管理和部署。但是，随着项目规模的增大，单包架构可能会变得臃肿和难以维护。

相反，在多包架构中，前端项目代码被组织在多个包中。每个包都是一个独立的模块，可以独立开发、测试和部署。多包架构的优点是模块化、可扩展性强，易于维护和升级。但是，多包架构需要更多的配置和工具支持，开发和部署也可能变得更加复杂。

avatar
文章
阅读
粉丝