Zarm-Web 开源项目教程

1、项目介绍

Zarm-Web 是众安科技基于 React 研发的一款适用于企业级的桌面端 UI 组件库。它是 Zarm 移动端版本的延伸，旨在提供一套稳定、美观且易用的界面元素，帮助开发者快速构建专业级别的桌面应用。Zarm-Web 的命名灵感来源于众安保险的理念：做有温度的保险，因此它不仅仅是一组工具，更是一个关注用户体验，希望带给用户贴心感受的框架。

2、项目快速启动

安装

推荐使用 npm 或 yarn 进行安装：

# 使用 npm 安装
npm install zarm-web@alpha --save

# 使用 yarn 安装
yarn add zarm-web@alpha

使用

全组件引入

import { Button, Input } from 'zarm-web';
import 'zarm-web/dist/zarm-web.min.css';

按需加载

Zarm-Web 默认支持基于 ES module 的 tree shaking，不使用以下插件也会有按需加载的效果。

使用 babel-plugin-import 自动加载 Sass 文件（推荐）：

// .babelrc or babel-loader option
{
  "plugins": [
    ['import', { libraryName: 'zarm-web', style: true }]
  ]
}

import { Button } from 'zarm-web';

手动引入：

import Button from 'zarm-web/lib/button';
import 'zarm-web/lib/button/style/css'; // 加载css
// import 'zarm-web/lib/button/style'; // 加载scss

3、应用案例和最佳实践

Zarm-Web 适用于各种企业级应用场景，如金融、医疗、教育等领域。其丰富的组件库涵盖了按钮、输入框、表单、导航、提示等多种基础和高级组件，满足从简单到复杂的各种界面设计需求。无论是构建管理后台还是客户门户，Zarm-Web 都能助您一臂之力。

最佳实践

1. 定制主题：通过修改 CSS 变量定义达到定制主题的效果。

   document.documentElement.style.setProperty('--theme-primary', '#108ee9');
   

2. 按需加载：使用 babel-plugin-import 插件按需引入组件及其对应的样式资源，优化页面性能。

4、典型生态项目

Zarm-Web 作为 Zarm 桌面端版本的实现，与 Zarm 移动端版本形成了良好的生态互补。Zarm 移动端版本已经在业界广受好评，Zarm-Web 的推出进一步完善了众安科技在前端组件库领域的布局。

相关项目

• Zarm Design：众安科技的移动端组件库，与 Zarm-Web 共同构成了众安科技在前端组件库领域的完整解决方案。
• React：Zarm-Web 基于 React 技术栈，充分利用了 React 的组件化开发优势。

通过这些项目的结合使用，开发者可以构建出更加丰富和多样化的应用界面，提升用户体验。