[TOC] > [gitee](https://gitee.com/xuliangzhan_admin/vxe-table) > [在线演示](https://vxetable.cn/#/table/edit/select) ## 安装 `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) // 给 vue 实例挂载全局窗口对象，属性名称随意定义，例如：$XModal Vue.prototype.$modal = VXETable.modal ``` ## 按需引入 `npm install babel-plugin-import -D ` 编辑配置 ``` { "plugins": [ [ "import", { "libraryName": "vxe-table", "style": true // 样式是否也按需加载 } ] ] } ``` src/plugins/utils.js `import 'xe-utils' ` src/plugins/table.js <details> <summary>main.cpp</summary> ``` import Vue from 'vue' import XEUtils from 'xe-utils' import { VXETable, Table, Column, Header, Footer, Filter, Edit, Menu, Export, Keyboard, Validator, Grid, Toolbar, Pager, Checkbox, Radio, Input, Textarea, Button, Modal, Tooltip, Form, Select, Switch, List } 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(Edit) Vue.use(Menu) Vue.use(Export) Vue.use(Keyboard) Vue.use(Validator) Vue.use(Tooltip) Vue.use(Grid) Vue.use(Toolbar) Vue.use(Pager) Vue.use(Form) Vue.use(Checkbox) Vue.use(Radio) Vue.use(Switch) Vue.use(Input) Vue.use(Select) Vue.use(Button) Vue.use(Modal) Vue.use(List) // 再安装核心库 Vue.use(Table) // 给 vue 实例挂载全局窗口对象，属性名称随意定义，例如：$XModal Vue.prototype.$modal = VXETable.modal ``` </details> <br/> main.js ``` import './plugins/utils' import './plugins/table' ```