# 快速上手

本节将介绍如何在项目中使用 Honeycomb

# 引入Honeycomb

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

# 完整引入

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


import Vue from 'vue';
import HoneyComb from 'honeycomb';
import App from './App.vue';

Vue.use(HoneyComb);

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

以上代码便完成了 Honeycomb 的引入。需要注意的是,样式文件需要单独引入。

# 按需引入

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

首先,安装 babel-plugin-component:


npm install babel-plugin-component -D

然后,将 .babelrc 修改为:

{
  "presets": [["es2015", { "modules": false }]],
  "plugins": [
    [
      "component",
      {
        "libraryName": "honeycomb",
        "styleLibraryName": "theme"
      }
    ]
  ]
}

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


import Vue from 'vue';
import { Button, Select } from 'honeycomb';
import App from './App.vue';

Vue.component(Button.name, Button);
Vue.component(Select.name, Select);
/* 或写为
 * Vue.use(Button)
 * Vue.use(Select)
 */

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

# 全局配置

在引入 HoneyComb 时,可以传入一个全局配置对象。该对象目前支持 size 与 zIndex 字段。size 用于改变组件的默认尺寸,zIndex 设置弹框的初始 z-index(默认值:2000)。按照引入 Element 的方式,具体操作如下:

import Vue from 'vue';
import HoneyComb from 'honeycomb';
Vue.use(HoneyComb, { size: 'small', zIndex: 3000 });

# 开始使用

至此,一个基于 Vue 和 Honeycomb 的开发环境已经搭建完毕,现在就可以编写代码了。各个组件的使用方法请参阅它们各自的文档。