# 左邻移动端组件库

## 版本

- [稳定版：](https://www.npmjs.org/package/ehome-rcm)

## 安装

### 使用 npm 或 yarn 安装

**我们推荐使用 npm 或 yarn 的方式进行开发**，不仅可在开发环境轻松调试，也可放心地在生产环境打包部署使用，享受整个生态圈和工具链带来的诸多好处。

```bash
$ npm install ehome-rcm --save
```

```bash
$ yarn add ehome-rcm
```

如果你的网络环境不佳，推荐使用 [cnpm](https://github.com/cnpm/cnpm)。

### 浏览器引入

在浏览器中使用 `script` 和 `link` 标签直接引入文件，并使用全局变量 `ehome-rcm`。

我们在 npm 发布包内的 `ehome-rcm/dist` 目录下提供了 `ehome-rcm.js` `ehome-rcm.css` 以及 `ehome-rcm.min.js` `ehome-rcm.min.css`。

> **强烈不推荐使用已构建文件**，这样无法按需加载，而且难以获得底层依赖模块的 bug 快速修复支持。

## 示例

```jsx
import { Download } from 'ehome-rcm';
ReactDOM.render(<Download />, mountNode);
```

引入样式：

```jsx
import 'ehome-rcm/dist/ehome-rcm.css';  // or 'ehome-rcm/dist/ehome-rcm.less'
```

### 按需加载

下面两种方式都可以只加载用到的组件。

- 使用 [babel-plugin-import](https://github.com/ant-design/babel-plugin-import)（推荐）。可与 `antd-mobile` 一起使用。

   ```js
   // .babelrc or babel-loader option
   {
    "plugins": [
      ["import", [
        {
          "libraryName": "ehome-rcm",
          "style": true
        },
        {
          "libraryName": 'antd-mobile',
          "style": true
        }
      ]]
    ]
   }
   ```

   > 注意：webpack 1 无需设置 `libraryDirectory`。

   > 注意： babel-plugin-import options can't be an array in `babel@7+` , but you can add plugins with name to support multiple dependencies. For Example:

   ```js
   "plugins": [
      ["import", { "libraryName": "ehome-rcm"}, "ehome-rcm"],
      ["import", { "libraryName": "antd-mobile"}, "antd-mobile"]
    ]
   ```

   然后只需从 ehome-rcm 引入模块即可，无需单独引入样式。等同于下面手动引入的方式。

   ```jsx
   // babel-plugin-import 会帮助你加载 JS 和 CSS
   import { Download } from 'ehome-rcm';
   ```

- 手动引入

   ```jsx
   import Download from 'ehome-rcm/lib/download';  // 加载 JS
   import 'ehome-rcm/lib/download/style/css';        // 加载 CSS
   // import 'ehome-rcm/lib/download/style';         // 加载 LESS
   ```

### 高清方案

和ant-design的高清方案兼容，使用 modifyVars 的方式来覆盖变量。

```
 const theme = require('./package.json').theme;
 
 module.exports = {
      ...
      module: {
          ...
          rules: [
              ...
              {
                  test: /\.css$/,
                  use: [
                      'style-loader',
                      'css-loader',
                  ],
              },
              {
                  test: /\.less$/,
                  use: [
                      'style-loader',
                      'css-loader',
                      {loader: 'less-loader', options: {modifyVars: theme}},
                  ],
                  include: /node_modules/,
              },
              ...
          ],
      },
      ...
  }
```

```
{
    ...
    "theme": {
        "hd": "2px", // 默认为1px，设为2px即使用高清方案
        ...
    },
    ...
}
```

### 主题色

部分组件已实现主题色配置，但业务先需要对接我们的视觉规范：[左邻视觉规范](http://10.1.1.217/eh-front-end/zapp/wikis/visual-standard-doc)

在项目的 `public/index.html` 中第一个 `script` 标签前引入 `init.js` 及其依赖脚本文件，即可生效。

```
<script src="https://fe-cdn.zuolin.com/css-vars-ponyfill/1.16.2/css-vars-ponyfill.js"></script>
<script src="https://fe-cdn.zuolin.com/eh-init/init.js"></script>
```
