@alicloudfe/components

@alicloudfe/components

阿里云前端基础组件库，由混合云&公有云前端团队共建。 预览地址

💻 浏览器支持

✔	✔	✔	9+ ✔	✔	✔	✔

🚀 快速开始

🛠 安装

1.使用 npm 安装

npm install @alicloudfe/components --save

2.浏览器直接引用

在浏览器中使用 script 和 link 标签直接引入文件，并使用全局变量 AliCloudComponents。我们在 npm 包中提供了 @alicloudfe/components/dist 目录下的 index.js 和 hybridcloud.css / xconsole.css 等样式文件，也可以通过 unpkg 进行下载。

<link rel="stylesheet" href="https://unpkg.alibaba-inc.com/@alicloudfe/components/dist/hybridcloud.css" />

<script src="https://unpkg.alibaba-inc.com/@alicloudfe/components/dist/index.js"></script>

// 以上引入都是引入的最新版本 @alicloudfe/components
，我们也可以引入固定版本的组件资源，以保证代码稳定
<script src="https://unpkg.alibaba-inc.com/@alicloudfe/components@1.0.12/dist/index.js"></script>

其中 @alicloudfe/components 默认 external 了这些依赖： react 、 react-dom 、 prop-types 、moment 参考 html 如下：

 <script src="https://unpkg.alipay.com/react@16.14.0/umd/react.development.js"></script>
 <script src="https://unpkg.alipay.com/react-dom@16.14.0/umd/react-dom.development.js"></script>
 <script src="https://unpkg.alipay.com/prop-types@15.7.1/prop-types.js"></script>
 <script src="https://unpkg.alipay.com/moment@2.29.1/moment.js"></script>
 <script src="https://unpkg.alibaba-inc.com/@alicloudfe/components/dist/index.js"></script>

☔️ 依赖

• @alicloudfe/components 基于 react@16 开发，目前并不兼容 react@16 以下的版本，且将 react/react-dom 作为 peerDependencies，需要用户手动提前安装或引入。
• @alicloudfe/components 在处理日期时间相关组件逻辑时，使用了 moment 库，且将 moment 作为 peerDependencies，需要用户手动提前安装或引入。

🔨 示例

import { Button, DatePicker } from '@alicloudfe/components';

const App = () => (
  <>
    <Button type="primary">PRESS ME</Button>
    <DatePicker />
  </>
);

引入样式：

import '@alicloudfe/components/dist/hybridcloud.css'; 

💄关于样式文件

本组件库没有默认的样式主题，大家可根据业务选择不同的样式文件，目前的主题包括：

• PaaS 侧

  • hybridcloud: 混合云亮色主题
  • hybridcloud-dark: 混合云暗色主题
  • xconsole:公有云 xconsole 主题
  • wind: 公有云 wind（旧版 xconsole） 主题

• SaaS 侧

  • yunxiao: 云效主题
  • aone: Aone 主题
  • teamix: Teamix 主题
  • b-design: Bdesign 主题

对于每一个主题，我们生成了对应的四份样式文件供大家使用，以混合云亮色主题为例：

• hybridcloud.css : 全量未压缩样式（组件样式 + css var）
• hybridcloud.min.css : 全量压缩后样式（组件样式 + css var）
• hybridcloud-no-var.css : 纯组件样式，不包括 css var 定义
• hybridcloud-var.css : 纯 css var 定义样式文件，用于主题切换

🔌 相关插件

• @alicloud/console-toolkit-fusion-css-loader: 一个 webpack loader，用来修改 fusion 的 css 的选择器类名前缀。比如把 .next-btn 的类名修改成 .my-prefix-btn。 这样做的目的是，控制 fusion 样式的作用范围，让一个页面中可以同时存在多份不同版本的 fusion，同时不会出现样式冲突。

• build-plugin-fusion-css: build-scripts 插件，功能同上，用于 build-scripts 体系

🤝 参与共建

一个好的开源组件库是需要不断打磨的，本组件库也是我们和 fusion 团队共建后的成果，欢迎大家提 PR，或者联系佐七、萧雨成为仓库成员来提 MR。如何贡献请参考贡献指南。