0.0.5 • Published 4 years ago
rs-rmui v0.0.5
快速上手
安装
# 通过 npm 安装
npm i rs-rmui -S
# 通过 yarn 安装
yarn add rs-rmui
引入组件
方式一. 自动按需引入组件 (推荐)
babel-plugin-import 是一款 babel 插件,它会在编译过程中将 import 的写法自动转换为按需引入的方式
# 安装插件
npm i babel-plugin-import -D
// 在.babelrc 中添加配置
// 注意:webpack 1 无需设置 libraryDirectory
{
"plugins": [
["import", {
"libraryName": "rs-rmui",
"libraryDirectory": "es",
"style": true
}]
]
}
// 对于使用 babel7 的用户,可以在 babel.config.js 中配置
module.exports = {
plugins: [
['import', {
libraryName: 'rs-rmui',
libraryDirectory: 'es',
style: true
}, 'rs-rmui']
]
};
// 接着你可以在代码中直接引入 rs-rmui 组件
// 插件会自动将代码转化为方式二中的按需引入形式
import { Button } from 'rs-rmui';
如果你在使用 TypeScript,可以使用 ts-import-plugin 实现按需引入
方式二. 手动按需引入组件
在不使用插件的情况下,可以手动引入需要的组件
import Button from 'rs-rmui/lib/button';
import 'rs-rmui/lib/button/style';
方式三. 导入所有组件
Vant 支持一次性导入所有组件,引入所有组件会增加代码包体积,因此不推荐这种做法
import Vue from 'vue';
import Rmui from 'rs-rmui';
import 'rs-rmui/lib/index.css';
Vue.use(Rmui);
配置按需引入后,将不允许直接导入所有组件