### Global Install with npm/yarn
Source: https://vxetable.cn/v4_old
This snippet demonstrates how to install VxeTable and Vxe UI components using npm or yarn. It also shows how to import and use these components in a Vue 3 application, specifying dependencies like Vue 3.2+.
```bash
npm install vxe-table@4.7.87
# 或者
yarn add vxe-table@4.7.87
```
```javascript
// ... 纯表格
import VxeUITable from 'vxe-table'
import 'vxe-table/lib/style.css'
// ...
// ...可选 UI
import VxeUIAll from 'vxe-pc-ui'
import 'vxe-pc-ui/lib/style.css'
// ...
createApp(App).use(VxeUIAll).use(VxeUITable).mount('#app')
```
--------------------------------
### CDN Installation for VxeTable and Vxe UI
Source: https://vxetable.cn/v4_old
This code demonstrates how to include VxeTable and Vxe UI components in an HTML page using Content Delivery Networks (CDNs). It shows the necessary script and link tags for importing Vue, xe-utils, vxe-pc-ui, and vxe-table, along with their respective CSS files.
```html
```
--------------------------------
### Install and Configure Vxe UI Region Selection Plugin (JavaScript)
Source: https://vxetable.cn/pluginDocs/table
This snippet demonstrates how to install the Vxe UI enterprise version and configure the region selection plugin. It includes importing necessary modules, the plugin's CSS, and setting the authorization ID.
```javascript
import VxeUIAll, { VxeUI } from 'vxe-pc-ui'
import 'vxe-pc-ui/lib/style.css'
import VxeUITable from 'vxe-table'
import 'vxe-table/lib/style.css'
// Import extension plugin
import './extend-cell-area/vxe-table-extend-cell-area.es6.min'
import './extend-cell-area/vxe-table-extend-cell-area.min.css'
// Set authorization information
VxeUI.setConfig({
// showAuthLog: true, // Whether to display authorization information in the console, professional version supports closing
authId: 'Auth ID', // Get authorization and log in to the official website to view in the "User Center"
// onAuth (e) {
// // Print authorization status
// console.log(e)
// }
})
createApp(App).use(VxeUIAll).use(VxeUITable).mount('#app')
```
--------------------------------
### 使用 vxe-table-plugin-export-xlsx 插件
Source: https://vxetable.cn/other4
在项目中使用 vxe-table-plugin-export-xlsx 插件。可以通过 NPM 安装并注入 ExcelJS 对象,或者通过 CDN 安装并确保 window.ExcelJS 存在。
```javascript
import VXETable from 'vxe-table'
import VXETablePluginExportXLSX from 'vxe-table-plugin-export-xlsx'
import ExcelJS from 'exceljs'
// 方式1:NPM 安装,注入 ExcelJS 对象
VXETable.use(VXETablePluginExportXLSX, {
ExcelJS
})
// 方式2:CDN 安装,只要确保 window.ExcelJS 存在即可
// VXETable.use(VXETablePluginExportXLSX)
```
--------------------------------
### 安装 vxe-table-plugin-export-xlsx 插件
Source: https://vxetable.cn/other4
使用 npm 安装 vxe-table-plugin-export-xlsx 插件及其依赖项 exceljs。请确保安装的版本与 vxe-table 版本兼容。
```bash
npm install vxe-table@4.6.19 vxe-table-plugin-export-xlsx@4.0.6 exceljs
```
=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.