组件库使用流程

简介

• 该组件库适用于不依赖脚手架创建项目工程，适用于在已有项目中进行安装。
• 该组件库是基于 vue 平台进行搭建，目前只适用于 vue 项目。
• 该组件库中不仅包括组件本身，还有一些常用的工具类也在里面有所封装。

通过 npm 下载组件库

命令如下：

yarn add btfly-component (推荐使用yarn)
npm install btfly-component

效果如下：

安装完毕之后，会在 node modules 出现 btfly-component 组件

所有详细内容也可以参考组件库中的 README.md 文件进行介绍。

使用方法（示例并非完整代码）

• 第一步：在项目工程中的主入口（main.js）加载该组件。方法如下：

import Vue from "vue";
import App from "./App.vue";
import { LOG, APPS, BACKEND } from "./config/SETUP";
import store from "./store/";
import VueRouter from "vue-router";
import Butterfly from "btfly-component";

// 开启组件库响应式
// Butterfly.responsive.init();

// 设置LOG、PLATFORM、BACKEND 等全局变量
Butterfly.setup(LOG, APPS, BACKEND);

// 多语言
let { i18n } = Butterfly.instances;

// 路由
Vue.use(VueRouter);
...
new Vue({
  i18n,
  //router will be updated whild App is created
  router,
  store,
  render: h => h(App)
}).$mount("#app");

• 第二步：在项目工程中的根组件（App.vue）加载该组件。方法如下：

<template>
  <div id="app">
    <btfly-spin :spinning="spinning" size="large">
      <btfly-locale-provider :locale="getLocale()">
        <MainFrame />
      </btfly-locale-provider>
    </btfly-spin>
  </div>
</template>

<script>
import MainFrame from "@/views/platform/ui/MainFrame";
import zh_CN from "btfly-component/libs/assets/platform/local/zh_CN";
import en_US from "btfly-component/libs/assets/platform/local/en_US";
import RouterUtils from "btfly-component/libs/utils/RouterUtils";
import UiUtils from "btfly-component/libs/utils/UiUtils";
import DsUtils from "btfly-component/libs/utils/DsUtils";
import { APPS, BACKEND } from "@/config/SETUP";
import moment from "moment";
import "moment/locale/zh-cn";
import "moment/locale/en-gb";
import "btfly-component/libs/components/btfly-spin/";
import "btfly-component/libs/components/btfly-locale-provider/";
import "btfly-component/libs/themes/style/btfly-app.less";

// 默认语种
const LOCALE_CODE = "zh_CN";
// 组件多语言语包映射，目前只包含中文和英文
const LANGUAGE_MAP = {
  zh_CN,
  en_US
};
// 多语言语种和moment包映射关系，目前只包含中文和英文
const LANGUAGE_MOMENT_MAP = {
  zh_CN: "zh-cn",
  en_US: "en-gb"
};

export default {
  name: "app",
  data() {
    return {
      spinning: false,
      localeCode: LOCALE_CODE
    };
  },
  beforeCreate() {
  	// 设置请求 baseUrl
    DsUtils.init("");
	// 设置UI工具类实例对象
    UiUtils.init(this);
	// 设置路由工具类实例对象
    RouterUtils.init(this);


    // let BASE_URL = BACKEND.BASE_URL;
    // let { query } = this.$route;

    // // Request 请求拦截
    // DsUtils.addGlobalRequestInterceptor(
    //   config => {
    //     // let { headers, url } = config || {};
    //     // const { ServiceName, appId: selectAppId } = headers || {};
    //     return config;
    //   },
    //   // Request 异常拦截
    //   err => DsUtils.axiosErrorHandler(err)
    // );

    // DsUtils.addGlobalResponseInterceptor(
    //   // Response 响应拦截
    //   response => DsUtils.axiosResponseHandler(response),
    //   // Response 异常拦截
    //   err => DsUtils.axiosErrorHandler(err)
    // );
  },
  components: {
    MainFrame
  },
  created() {
    // 多语言处理
    let language = APPS.LANGUAGE || LOCALE_CODE;
    this.localeCode = language;
    moment.locale(LANGUAGE_MOMENT_MAP[language]);
  },
  methods: {
    getLocale() {
      return LANGUAGE_MAP[this.localeCode];
    }
  }
};
</script>

<style>
#app > .ant-spin-nested-loading {
  height: 100%;
  position: static; /* fix the tree context menu position is not right issue. */
}
#app > .ant-spin-nested-loading > .ant-spin-container {
  position: static; /* fix the tree context menu position is not right issue. */
}

#app > .ant-spin-nested-loading > div > .ant-spin-spinning {
  max-height: inherit;
}
</style>

• 第三步：需在具体地方使用时，引入具体组件。方法如下：

...
import "btfly-component/libs/components/btfly-button/”
...