v1 依赖: vue 2.6.x, xe-utils 2.8+
v2 依赖: vue 2.6.x, xe-utils 2.8+
v3 依赖: vue 2.6.x, xe-utils 3.x
v4 依赖: vue 3.x, xe-utils 3.x
src/plugins/utils.js
import 'xe-utils'
src/plugins/table.js
import Vue from 'vue'
import VXETable from 'vxe-table'
import 'vxe-table/lib/style.css'
Vue.use(VXETable)
main.js
import './plugins/utils'
import './plugins/table'
src/plugins/utils.js
import 'xe-utils'
src/plugins/table.js
import Vue from 'vue'
import XEUtils from 'xe-utils'
import {
VXETable,
Icon,
Header,
Column,
Table
} from 'vxe-table'
import zhCNLocat from 'vxe-table/lib/locale/lang/zh-CN'
// 按需加载的方式默认是不带国际化的,需要自行导入
VXETable.setup({
// 使用 vue-i18n 解析占位符 '{xx}'
i18n: (key, args) => i18n.t(key, args),
// 使用 xe-utils 解析占位符 '{xx}'
// i18n: (key, args) => XEUtils.toFormatString(XEUtils.get(zhCNLocat, key), args)
})
// 先按需导入依赖的模块
Vue.use(Icon)
Vue.use(Header)
Vue.use(Column)
// 最后安装核心库
Vue.use(Table)
main.js
import './plugins/utils'
import './plugins/table'
安装插件,支持按需加载
npm install babel-plugin-import -D
修改 .babelrc 或 babel.config.js 配置文件
module.exports = {
// ...,
plugins: [
[
'import',
{
'libraryName': 'vxe-table',
'style': true
}
]
]
}
main.js
import { createApp } = 'vue'
import 'xe-utils'
import VXETable from 'vxe-table'
import 'vxe-table/lib/style.css'
createApp(App).use(VXETable).mount('#app')