ehome-rcm

0.15.3 • Public • Published

左邻移动端组件库

版本

安装

使用 npm 或 yarn 安装

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

$ npm install ehome-rcm --save
$ yarn add ehome-rcm

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

浏览器引入

在浏览器中使用 scriptlink 标签直接引入文件,并使用全局变量 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>

Readme

Keywords

none

Package Sidebar

Install

npm i ehome-rcm

Weekly Downloads

11

Version

0.15.3

License

none

Unpacked Size

8.31 MB

Total Files

432

Last publish

Collaborators

  • ehome