ehome-rcm
v0.15.3
Published
## 版本
Downloads
186
Readme
左邻移动端组件库
版本
安装
使用 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>