APIbeta

Introduce

安装

使用cli

1
2
> npm i bpui-cli -g
> bpui init  # 执行初始化指令创建项目;
  1. 每一个组件也可以单独使用, 组件在组织 @bpui 下, 可独立安装,

例如: @bpui/switch, @bpui/navbar-view 等

  1. bpui-cli 可以进行组件更新

bpui update

使用

可以有动态加载及静态加载两种方式; 在vuejs中使用如下方法进行使用:

静态加载.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
import "core-js/stable";
import "regenerator-runtime/runtime";

import Vue from "vue";
import bpui from "bpui.js";
import 'bpui.js/static';
import App from "./app.vue";
import routers from "./router";

__debug = process.env.NODE_ENV === "development";
Vue.config.productionTip = false;

// navbar cfg.
bpui.setNavbarDefaultCfg({ retainPageInPush: false, });

// 404 使用nginx指向 /404.html 页面.
// routers.push({ path: '*', component: () => import('./pages/default/404.vue') });
routers.push({ name: null, path: '404.html', component: () => import('./pages/default/404.vue') });

// register app.
bpui.registerApp({ routePath: routers, basePath: '/' });

// create instance.
export default new Vue({
  render: h => h(App)
}).$mount("#app");

动态按需加载

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
import "core-js/stable";
import "regenerator-runtime/runtime";

import Vue from "vue";
import bpui from "bpui.js";

__debug = process.env.NODE_ENV === "development";
Vue.config.productionTip = false;

bpui
  .registerComponents(Vue, ['navbarView', 'input'])
  // navbar cfg.
  .then(() => {
    bpui.setNavbarDefaultCfg({
      retainPageInPush: false,
    });
  })
  // app.
  .then(() => Promise.all([import("./app.vue"), import("./router")]))
  .then(modules => {

    const App = modules[0].default;
    const routers: any[] = modules[1].default;

    // 404 使用nginx指向 /404.html 页面.
    // routers.push({ path: '*', component: () => import('./pages/default/404.vue') });
    routers.push({ path: '404.html', component: () => import('./pages/default/404.vue') });

    // register app.
    bpui.registerApp({ routePath: routers, basePath: '/' });
    
    // create instance.
    new Vue({
      render: h => h(App)
    }).$mount("#app");

  })
  .catch(e => {
    console.error(e);
  });

引入样式.

1
@import '~src/bpui/style';    // 引入复制到项目中的样式文件.

组件规范

组件需要按照如下的目录组织

1
2
3
4
5
6
7
─── ./
  └── dist/                  # 编译出的结果文件.
  └── src/                   # 源码目录.
    └── index.js             # index.js 或者 index.ts 作为导出文件入口
  └── style/                 # 样式目录
  └── types/                 # 类型说明文件
  └── package.json           # 包配置文件

package.json

需要包含如下几部分内容:

index.js

入口文件中需要导出如下内容:

1
2
3
4
5
6
7
8
9
export default {
  init() {},            // 初始化方法, 再组件加载时会被调用
  VuePlugin():{install},  // 返回组件所需的插件对象

  /*
   * 其他需要导出的内容. 例如: navbarView 组件.
   */
  bpNavbarView,   
}

开始使用框架之前, 请先查看 基础库