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>