bfo-ui v0.1.2

bfo-ui

下载

npm install bfo-ui

完整引入

 import Vue from "vue";
 import bfoUi from 'bfo-ui';
 import 'bfo-ui/lib/style/index.css';
 import App from './App.vue';

 Vue.use(bfoUi);

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

按需引入

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

npm install babel-plugin-import -D

然后，在根目录下新建.babelrc或者在已有的babel.config.js中添加

module.exports = {
  presets: ["@vue/app"],
  "plugins": [
    [
      "import",
      {
        libraryName: "bfo-ui",
        "camel2DashComponentName": false,//关闭驼峰自动转链式
        "camel2UnderlineComponentName": false,//关闭蛇形自动转链式
        "style": name => {
          const cssname = name.split("/")[2];
          return `bfo-ui/lib/style/${cssname}.css`
        }
      }
    ]
  ]

};

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

import Vue from "vue";
import App from "./App.vue";
import {compontA} from "bfo-ui";
Vue.use(compontA);

Vue.config.productionTip = false;

new Vue({
  render: (h) => h(App),
}).$mount("#app");

目前有的组件

• testA
• testB