ehome-rcm

左邻移动端组件库

版本

• 稳定版：

安装

使用 npm 或 yarn 安装

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

$ npm install ehome-rcm --save

$ yarn add ehome-rcm

如果你的网络环境不佳，推荐使用 cnpm。

浏览器引入

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

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

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

示例

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

引入样式：

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

按需加载

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

• 使用 babel-plugin-import（推荐）。可与 antd-mobile 一起使用。

  // .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:

  "plugins": [
     ["import", { "libraryName": "ehome-rcm", "style": true}, "ehome-rcm"],
     ["import", { "libraryName": "antd-mobile", "style": true}, "antd-mobile"]
   ]

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

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

• 手动引入

  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即使用高清方案
        ...
    },
    ...
}

主题色

部分组件已实现主题色配置，但业务先需要对接我们的视觉规范：左邻视觉规范

在项目的 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>