@bixiao/ui

TODO: 必效项目 UI库

Usage

yarn 安装

推荐使用 yarn 的方式安装，它能更好地和 webpack 打包工具配合使用。

yarn add @bixiao/ui -S

引入 @bixiao/ui

你可以引入整个 @bixiao/ui，或是根据需要仅引入部分组件。我们先介绍如何引入完整的 @bixiao/ui。

完整引入

在 main.js 中写入以下内容：

import Vue from 'vue';
import TlUi from '@bixiao/ui';
import 'tl-ui/lib/theme-chalk/index.css';
import App from './App.vue';

Vue.use(TlUi);

new Vue({
    el: '#app',
    render: h => h(App)
});

以上代码便完成了 @bixiao/ui 的引入。需要注意的是，样式文件需要单独引入。

按需引入

借助 babel-plugin-component，我们可以只引入需要的组件，以达到减小项目体积的目的。

首先，安装 babel-plugin-component：

npm install babel-plugin-component -D

然后，将 .babelrc 修改为：

{
  "presets": [
    [
      "es2015",
      {
        "modules": false
      }
    ]
  ],
  "plugins": [
    [
      "component",
      {
        "libraryName": "@bixiao/ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

接下来，如果你只希望引入部分组件，比如 Button 和 Select，那么需要在 main.js 中写入以下内容：

import Vue from 'vue';
import {Popover, SearchSelect} from '@bixiao/ui';
import App from './App.vue';

Vue.component(Popover.name, Popover);
Vue.component(SearchSelect.name, SearchSelect);
/* 或写为
 * Vue.use(Popover)
 * Vue.use(SearchSelect)
 */

new Vue({
    el: '#app',
    render: h => h(App)
});

完整组件列表和引入方式（完整组件列表以 components.json 为准）

import Vue from 'vue';
import {
    Avatar,             // 头像
    ContactCustomer,    // 联系客户
    Dialog,             // 对话框
    // DateTimePicker,     // 时间日期选择器（不可用🚫）
    GuideTour,          // 全局引导
    Image,              // 图片
    InputNumber,        // 数字输入框
    InviteMembers,      // 邀请对话框
    LoginSwitch,        // 登录切换框
    // MessageBox,         // 消息通知（不可用🚫）
    Pagination,         // 分页器
    Popover,            // 弹出框
    SearchSelect,       // 弹出与对话框选择器
    Upload,             // 上传
} from '@bixiao/ui';