VXETable按需引入

VXETable 按需引入,并兼容iView组件；

• 1.安装插件

npm install xe-utils vxe-table@next

2. 在libs文件夹中新建文件 vxe-table.js，当然你可以放在任意你喜欢的文件夹里

import Vue from 'vue'
import {
  VXETable,
  Icon,
  Header,
  Column,
  Table,
  Edit,
  Input,
  Select,
  Validator,
  Tooltip,
  Modal,
  Toolbar,
  Button,
} from 'vxe-table'
import XEUtils from 'xe-utils'
import zhLocale from 'vxe-table/lib/locale/lang/zh-CN'

Vue.use(Button)
Vue.use(Toolbar)
Vue.use(Modal)
Vue.use(Tooltip)
Vue.use(Validator)
Vue.use(Select)
Vue.use(Input)
Vue.use(Edit)
Vue.use(Icon)
Vue.use(Header)
Vue.use(Column)
Vue.use(Table)

// 按需加载的方式默认是不带国际化的，需要自行导入
VXETable.setup({
  zIndex: 9999999,
  i18n: (key, args) => XEUtils.toFormatString(XEUtils.get(zhLocale, key), args),
})

3.在main.js 引入

import './libs/vxe-table'

4 webpack使用插件按需加载

npm install babel-plugin-import -D

5.在babel.config中配置按需引入vxe-table

module.exports = {
  presets: ['@vue/cli-plugin-babel/preset'],
  plugins: [
    '@babel/plugin-proposal-optional-chaining', // 可选链
    '@babel/plugin-proposal-nullish-coalescing-operator', // 双问号
    'lodash', // 按需引用 lodash
    [  // 按需引用 iview
      'import',
      {
        libraryName: 'view-design',
        libraryDirectory: 'src/components',
      },
    ],
    [ // 这里 按需引入'vxe-table'
      'import',
      {
        libraryName: 'vxe-table',
        style: true,
      },
      'vxe-tables', // 这个名字是别名，当按需引入有多个时,必须添加别名
    ],
  ],
}