npm install xe-utils vxe-table
import Vue from 'vue'
import 'xe-utils'
import VXETable from 'vxe-table'
import 'vxe-table/lib/index.css'
Vue.use(VXETable)
安装指南
借助插件 babel-plugin-import 可以实现按需加载模块,减少文件体积。然后在文件 .babelrc 中配置
npm install babel-plugin-import -D
{
"plugins": [
[
"import",
{
"libraryName": "vxe-table",
"style": true // 样式是否也按需加载
}
]
]
}
最后这样按需引入模块,就可以减小体积了
import Vue from 'vue'
import XEUtils from 'xe-utils'
import {
// 实例
VXETable,
// 依赖
Icon,
Column,
Header,
Footer,
Filter,
Loading,
Tooltip,
Grid,
Menu,
Toolbar,
Pager,
Form,
Checkbox,
Radio,
Input,
Button,
Modal,
Edit,
Export,
Keyboard,
Validator,
Resize,
// 核心
Table
} from 'vxe-table'
import zhCNLocat from 'vxe-table/lib/locale/lang/zh-CN'
// 按需加载的方式默认是不带国际化的,需要自行导入
VXETable.setup({
i18n: (key, value) => XEUtils.get(zhCNLocat, key)
})
// 先安装依赖模块
Vue.use(Icon)
Vue.use(Column)
Vue.use(Header)
Vue.use(Footer)
Vue.use(Filter)
Vue.use(Loading)
Vue.use(Tooltip)
Vue.use(Grid)
Vue.use(Menu)
Vue.use(Toolbar)
Vue.use(Pager)
Vue.use(Form)
Vue.use(Checkbox)
Vue.use(Radio)
Vue.use(Input)
Vue.use(Button)
Vue.use(Modal)
Vue.use(Edit)
Vue.use(Export)
Vue.use(Keyboard)
Vue.use(Validator)
Vue.use(Resize)
// 再安装核心库
Vue.use(Table)