1.1.0 • Published 6 years ago
ibee v1.1.0
ibee
An ui depend on vue
兼容性
- 支持 UC、微信等主流移动端浏览器
快速上手
你可以引入整个 ibee,或是根据需要仅引入部分组件。我们先介绍如何引入完整的 ibee。
完整引入 ibee
# vue项目中添加依赖
yarn add ibee
// 在入口文件中使用
import Vue from 'vue'
import ibeeUI from 'ibee'
import 'ibee/lib/theme-default/index.css'
Vue.use(ibeeUI)
那么接下来即可在 Vue
挂载的节点下使用该 ui 组件了
按需引入(推荐)
目前按需引入不能和其他 ui 框架共存
# vue项目中添加依赖
yarn add ibee
# 添加 babel-plugin-component
yarn add babel-plugin-component -D
安装完 ibee
和 babel-plugin-component
后,在.babelrc
中添加配置:
{
plugins: [
[
'component',
{
libraryName: 'ibee',
styleLibraryName: 'theme-default'
}
]
]
}
接下来,如果你只希望引入部分组件,比如 Button
和 Select
,那么需要在 main.js 中写入以下内容:
import Vue from 'vue'
import { Button, Select } from 'ibee'
import App from './App.vue'
Vue.use(Button)
Vue.use(Select)
new Vue({
el: '#app',
render: h => h(App)
})
使用姿势
引入 ui 组件后并通过vue
注册组件后,在vue
挂载的节点下即可使用组件。
组件以dm-
为前缀的命名方式。
// main.js
import Vue from 'vue'
import ibeeUI from 'ibee'
import 'ibee/theme-default/index.css'
import App fromm './App.vue'
// 全局注册
Vue.use(ibeeUI)
new Vue({
el: '#app',
render: h => h(App)
})
// App.vue
<template>
<div id="app">
<dm-button type="primary">按钮</dm-button>
<dm-input v-model="value" placeholder="请输入..." />
</div>
</template>