# 快速开始

# 完整引入

import Vue from "vue";
import ElementUI, { Input, Select, DatePicker } from "element-ui";
import "element-ui/lib/theme-chalk/index.css";
import Pro from "vue-pro-element";

Vue.use(ElementUI);
Vue.use(Pro);
new Vue({
  el: "#app",
  render: (h) => h(App),
});

1
2
3
4
5
6
7
8
9
10
11

# 按需引入

# 需要安装 babel-plugin-import (opens new window);

yarn 方式安装
yarn add babel-plugin-import --dev
npm 方式安装
npm install babel-plugin-import -D

1
2
3
4

# 配置 babel

{
    ...
    "plugins": [
        "import",
        {
            "libraryName": "vue-pro-element",
            "libraryDirectory": "lib"
        },
        "vue-pro-element"
    ],
}

1
2
3
4
5
6
7
8
9
10
11

# 使用组件

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

import Vue from "vue";
import { FormGrid, Pagination } from "vue-pro-element";
import App from "./App.vue";

Vue.component(FormGrid.name, FormGrid);
Vue.component(Pagination.name, Pagination);
/* 或写为
 * Vue.use(FormGrid)
 * Vue.use(Pagination)
 */
new Vue({
  el: "#app",
  render: (h) => h(App),
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14

# 全局配置

# 完整引入

import Vue from "vue";
import ElementUI, { Input, Select, DatePicker } from "element-ui";
import "element-ui/lib/theme-chalk/index.css";
import Pro from "vue-pro-element";

Vue.use(ElementUI);
Vue.use(Pro, {
  map: { Input, Select, DatePicker },
  dictNameKey: "dictionariesName",
  dictValueKey: "dictionariesValue",
  paginationPageKey: "page",
  paginationLimitKey: "pageSize",
});
new Vue({
  el: "#app",
  render: (h) => h(App),
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

# 按需引入

import Vue from "vue";
import ElementUI, { Input, Select, DatePicker } from "element-ui";
import { FormGrid, Pagination } from "vue-pro-element";
import App from "./App.vue";
Vue.component(FormGrid.name, FormGrid);
Vue.component(Pagination.name, Pagination);
Vue.prototype.$proComponentMap = { Input, Select, DatePicker };
Vue.prototype.$dictNameKey = "dictionariesName";
Vue.prototype.$dictValueKey = "dictionariesValue";
Vue.prototype.$paginationPageKey = "page";
Vue.prototype.$paginationLimitKey = "pageSize";
Vue.use(ElementUI);
/* 或写为
 * Vue.use(FormGrid)
 * Vue.use(Pagination)
 */
new Vue({
  el: "#app",
  render: (h) => h(App),
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

# 配置说明

参数	说明	类型	可选值	默认值
dictNameKey	字典 name 值,用于匹配组件属性 columns.dict 数据	string	-	name
dictValueKey	字典 value 值,用于匹配组件属性 columns.dict 数据	string	-	value
paginationPageKey	分页页码标识,用于组件 request 方法回调入参 page 别名	string	-	page
paginationLimitKey	分页条数标识,用于组件 request 方法回调入参 limit 别名	string	-	limit
map	组件配置，用于 columns.component 组件字符串映射到实际组件	object	-	null

表单布局组件 →