快速上手

---

安装

npm install dock-plus --save

引入

方式一.自动按需引入组件 (推荐)

babel-plugin-import 是一款 babel 插件，它会在编译过程中将 import 的写法自动转换为按需引入的方式

# 安装插件
npm i babel-plugin-component -D

// 对于使用 babel7 的用户，可以在 babel.config.js 中配置
module.exports = {
  plugins: [
    [
      "component",
      {
        "libraryName": "dock-plus",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
};

// 接着你可以在代码中直接引入 JoinUI 组件
// 插件会自动将代码转化为方式二中的按需引入形式
import Vue from 'vue';
import { Qrcode, BgSelector } from 'dock-plus';
import App from './App.vue';

Vue.component(Qrcode.name, Qrcode);
Vue.component(BgSelector.name, BgSelector);
/* 或写为
 * Vue.use(Qrcode)
 * Vue.use(BgSelector)
 */

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

方式二.手动按需引入组件

在不使用插件的情况下，可以手动引入需要的组件。

import JBgSelector from 'dock-plus/lib/bg-selector';
import 'dock-plus/lib/theme-chalk/bg-selector.css';

方式三. 导入所有组件

JoinUI 支持一次性导入所有组件，引入所有组件会增加代码包体积，因此不推荐这种做法。

import Vue from 'vue';
import jui from 'dock-plus' // 引入组件库
import 'dock-plus/lib/theme-chalk/index.css'

Vue.use(jui);

Tips: 配置按需引入后，将不允许直接导入所有组件。