[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' ```