滴滴开源基于 React 的移动端开发组件库-Pile.js

拼搏现实的明天。 2022-03-19 02:44 324阅读 0赞

#### 简介 ####

Pile.js 是滴滴开发的基于 React 的移动端开发组件库。 轻量，易用，包含 52 个交互功能，支持多语言与自定义皮肤。可以非常轻松的创建用户交互界面，让前端开发更专注于业务逻辑的实现。

#### 安装使用 ####

第一步：安装React（已安装过可忽略）

npm install --save react react-don

第二步：安装pile-ui

npm install pile-ui --save

![pile-ui.png][]

第三步：引用样式和导入文件

// import css
    import 'pile/dist/styles/pile.min.css';
    import Pile
    
    // 引用方式一
    import Pile from 'pile'
    const {Button} = Pile
    
    // 引用方式二
    import {Button} from 'pile'
    
    // 单个组件引用方式 （推荐使用，节省无用组件调用）
    import Button from 'pile/dist/components/button'

第四步：引用组件代码：

import React, { Component } from 'react';
    import ReactDOM from 'react-dom';
     
    //import pile
    import Pile from 'pile'
    import 'pile/dist/styles/pile.min.css'
    const {Button} = Pile
     
    class App extends Component {
        render() {
            return (
                <Button>hello Pile</Button>
            );
        }
    }
     
    ReactDOM.render((
        <App/>
    ), document.getElementById('container'));

各种组件预览，如下：  
![滴滴开源的一个移动端开发组件库][1240]

![雷达图.jpg][.jpg]

![刻度尺.jpg][.jpg 1]

具体演示效果，可以扫描下方二维码，体验：

![pileqr.png][]

#### 项目地址： ####

Github：[https://github.com/didi/pile.js][https_github.com_didi_pile.js]

#### 更多精彩内容可以关注“IT实战联盟”微*信*公*众*号哦~~~ ####

[pile-ui.png]: /images/20220319/b102550e97e746b186a879167db855f3.png
[1240]: /images/20220319/fe4702daa73a469bbec739d6924b5d4c.png
[.jpg]: /images/20220319/15feaf1c337340b486d97a4ce657cad7.png
[.jpg 1]: /images/20220319/930601fae3ea474e9e498ab9f5754e40.png
[pileqr.png]: /images/20220319/5ff7c15be69047c5a1cdb101ec6bc33d.png
[https_github.com_didi_pile.js]: https://github.com/didi/pile.js