Vxe Table

https://github.com/x-extends/vxe-table-docs
Admin
Vxe Table is a feature-rich Vue data table component library providing advanced table, Gantt chart,...
Tokens:35,842
Snippets:339
Trust Score:8.8
License:MIT
Update:2 months ago
Show doc for...
Tokens:
Raw
### 常用项目开发与构建命令

Source: https://github.com/x-extends/vxe-table-docs/blob/main/_autodocs/00-目录.md

用于启动开发服务器、执行代码格式化、构建生产版本及管理项目依赖的常用 npm 命令。

```bash
# 开发
npm run serve              # 启动开发服务器
npm run build              # 构建生产版本

# 代码质量
npm run esfix:examples    # ESLint 检查修复
npm run oxfix:examples    # Oxfmt 格式化

# 构建和打包
npm run pack              # 打包文档和示例
npm run build:all         # 构建所有版本
npm run pack:all          # 打包所有版本

# 依赖管理
npm install               # 安装依赖
npm update                # 更新依赖
```

--------------------------------

### 项目启动与构建命令

Source: https://github.com/x-extends/vxe-table-docs/blob/main/_autodocs/10-快速参考.md

用于开发环境的初始化、启动以及生产环境的构建。

```bash
# 进入 v4 目录
cd v4

# 安装依赖
npm install

# 启动开发服务器
npm run serve

# 打开浏览器
http://localhost:5173
```

```bash
npm run build
```

--------------------------------

### 项目开发常用命令

Source: https://github.com/x-extends/vxe-table-docs/blob/main/_autodocs/10-快速参考.md

用于启动开发服务器、构建生产版本及打包文档。

```bash
npm run serve           # 启动开发服务器
npm run build           # 构建生产版本
npm run pack            # 打包文档和示例
```

--------------------------------

### 执行版本发布流程

Source: https://github.com/x-extends/vxe-table-docs/blob/main/_autodocs/09-构建和部署.md

按照更新版本号、构建、打标签和发布的顺序执行发布。

```bash
# 1. 更新版本号
npm version patch  # 0.1.0 -> 0.1.1
npm version minor  # 0.1.0 -> 0.2.0
npm version major  # 0.1.0 -> 1.0.0

# 2. 构建
npm run build:all

# 3. 创建标签
git tag v0.1.0
git push origin v0.1.0

# 4. 发布
npm publish
```

--------------------------------

### 全局组件注册与自动导入

Source: https://github.com/x-extends/vxe-table-docs/blob/main/_autodocs/03-组件系统.md

在 main.ts 中注册全局组件以及使用 import.meta.glob 自动导入视图组件。

```typescript
// src/main.ts 中的注册
import PreCode from './components/PreCode.vue'
import CodeLight from './components/CodeLight.vue'
import CodeList from './components/CodeList.vue'
import CodeRender from './components/CodeRender.vue'
import CodeUseVersion from './components/CodeUseVersion.vue'
import ApiLink from './components/ApiLink.vue'

app.component('PreCode', PreCode)
app.component('CodeLight', CodeLight)
app.component('CodeList', CodeList)
app.component('CodeRender', CodeRender)
app.component('CodeUseVersion', CodeUseVersion)
app.component('ApiLink', ApiLink)
```

```typescript
// src/common/modules.ts
export const demoModules = import.meta.glob<Component>([
  '@/views/**/*.vue'
])
```

--------------------------------

### 解决内存不足问题

Source: https://github.com/x-extends/vxe-table-docs/blob/main/_autodocs/09-构建和部署.md

通过设置 NODE_OPTIONS 增加 Node.js 的内存限制。

```bash
# 增加 Node.js 内存限制
NODE_OPTIONS=--max_old_space_size=4096 npm run build
```

--------------------------------

### 批量构建命令

Source: https://github.com/x-extends/vxe-table-docs/blob/main/_autodocs/09-构建和部署.md

在根目录执行所有版本的依赖更新、构建及打包操作。

```bash
# 更新所有版本依赖
npm run update:all

# 构建所有版本
npm run build:all

# 打包所有版本
npm run pack:all
```

--------------------------------

### 配置资源优化

Source: https://github.com/x-extends/vxe-table-docs/blob/main/_autodocs/09-构建和部署.md

构建时自动处理图片压缩、CSS 优化及 JavaScript 最小化。

```bash
# 图片压缩
# 在构建时自动优化

# CSS 优化
# Vite 自动使用 PostCSS

# JavaScript 最小化
# Terser 自动处理
```

--------------------------------

### 升级项目依赖

Source: https://github.com/x-extends/vxe-table-docs/blob/main/_autodocs/09-构建和部署.md

使用 npm 或 pnpm 命令检查并更新项目依赖项。

```bash
# 查看过期依赖
npm outdated

# 更新依赖
npm update

# 使用 pnpm 更新
pnpm update --latest
```

--------------------------------

### 执行项目打包

Source: https://github.com/x-extends/vxe-table-docs/blob/main/_autodocs/09-构建和部署.md

运行项目打包命令以触发构建、示例生成及压缩包创建。

```bash
npm run pack
```

--------------------------------

### 部署静态文件到 GitHub Pages

Source: https://github.com/x-extends/vxe-table-docs/blob/main/_autodocs/09-构建和部署.md

使用 npm 命令打包项目并推送到远程仓库。

```bash
# 部署到 GitHub Pages
npm run pack:all

# 推送到仓库
git add dist/
git commit -m "docs: update documentation"
git push origin main
```

--------------------------------

### 启动开发服务器

Source: https://github.com/x-extends/vxe-table-docs/blob/main/_autodocs/09-构建和部署.md

进入 v4 目录并启动开发服务器。

```bash
cd v4
npm run serve
```

--------------------------------

### 批量打包所有版本

Source: https://github.com/x-extends/vxe-table-docs/blob/main/_autodocs/09-构建和部署.md

执行全量构建、文档生成及压缩包打包命令序列。

```bash
# 打包所有版本
npm run pack:all

# 执行以下命令序列
npm run build:all
gulp build_all_docs
gulp build_all_zip
```

--------------------------------

### 克隆并查看文档

Source: https://github.com/x-extends/vxe-table-docs/blob/main/_autodocs/README.md

通过 Git 克隆项目仓库以在本地查看文档内容。

```bash
# 克隆或下载文档
git clone https://github.com/x-extends/vxe-table-docs.git
cd output

# 使用 Markdown 查看器或编辑器打开
# 推荐: VS Code, Typora, Obsidian 等
```

--------------------------------

### 配置环境变量

Source: https://github.com/x-extends/vxe-table-docs/blob/main/_autodocs/09-构建和部署.md

生产环境与开发环境的环境变量定义。

```bash
# .env.production
VITE_APP_PACKAGE_NAME=vxe-table
VITE_APP_VXE_VERSION=4
VITE_APP_PUBLIC_API_URL=https://api.vxeui.com
VITE_APP_RES_URL=https://docs.vxeui.com/resource

# .env.development
VITE_APP_PUBLIC_API_URL=http://localhost:3000
VITE_APP_RES_URL=http://localhost:8000/resource
```

--------------------------------

### 特定版本更新

Source: https://github.com/x-extends/vxe-table-docs/blob/main/_autodocs/09-构建和部署.md

针对指定版本执行依赖更新操作。

```bash
npm run update:v1      # 更新 v1 依赖
npm run update:v2      # 更新 v2 依赖
npm run update:v3      # 更新 v3 依赖
npm run update:v3_old  # 更新 v3_old 依赖
npm run update:v3d8    # 更新 v3.8 依赖
npm run update:v4      # 更新 v4 依赖
npm run update:v4_old  # 更新 v4_old 依赖
npm run update:v4d6    # 更新 v4.6 依赖
npm run update:other3  # 更新 other3 依赖
npm run update:other4  # 更新 other4 依赖
```

--------------------------------

### 依赖管理命令

Source: https://github.com/x-extends/vxe-table-docs/blob/main/_autodocs/10-快速参考.md

用于安装、更新项目依赖及进行安全审计。

```bash
npm install             # 安装依赖
npm update              # 更新依赖
npm audit               # 安全审计
```

--------------------------------

### 生产构建命令

Source: https://github.com/x-extends/vxe-table-docs/blob/main/_autodocs/09-构建和部署.md

执行 Vite 生产环境构建。

```bash
# Vite 构建
npm run build
```

--------------------------------

### 构建其他版本

Source: https://github.com/x-extends/vxe-table-docs/blob/main/_autodocs/09-构建和部署.md

针对不同版本目录执行打包命令。

```bash
# v1 版本
cd v1 && npm run pack

# v2 版本
cd v2 && npm run pack

# v3 版本
cd v3 && npm run pack

# v3_old 版本
cd v3_old && npm run pack

# v3.8 版本
cd v3.8 && npm run pack

# v4 版本
cd v4 && npm run pack

# v4_old 版本
cd v4_old && npm run pack

# v4.6 版本
cd v4.6 && npm run pack

# other3 版本
cd other3 && npm run pack

# other4 版本
cd other4 && npm run pack
```

--------------------------------

### 创建新演示流程

Source: https://github.com/x-extends/vxe-table-docs/blob/main/_autodocs/10-快速参考.md

通过命令行创建演示目录及文件，并配置路由与菜单。

```bash
# 1. 创建演示目录
mkdir src/views/demo/myDemo

# 2. 创建代码示例文件
touch src/views/demo/myDemo/CodeExample.vue

# 3. 创建演示组件
touch src/views/demo/myDemo/Demo1.vue

# 4. 添加路由 (src/router/index.ts)
{
  path: 'myDemo',
  name: 'DemoMyPreview',
  component: () => import('@/views/demo/myDemo/CodeExample.vue')
}

# 5. 添加菜单配置 (src/common/nav-config.ts)
{
  title: '我的演示',
  routerLink: { name: 'DemoMyPreview' }
}
```

--------------------------------

### Vue组件中使用状态管理

Source: https://github.com/x-extends/vxe-table-docs/blob/main/_autodocs/04-状态管理.md

通过useAppStore钩子访问全局状态、调用修改方法及使用计算属性。

```typescript
<script setup lang="ts">
import { useAppStore } from '@/store/app'

const appStore = useAppStore()

// 访问状态
console.log(appStore.theme)
console.log(appStore.language)
console.log(appStore.docsVersion)

// 调用方法
const switchTheme = () => {
  appStore.setTheme(appStore.theme === 'dark' ? 'light' : 'dark')
}

const switchLanguage = (lang) => {
  appStore.setLanguage(lang)
}

// 计算属性
const tableCDN = computed(() => appStore.tableCDNLib)
</script>
```

--------------------------------

### 命令行搜索文档内容

Source: https://github.com/x-extends/vxe-table-docs/blob/main/_autodocs/README.md

使用 grep 命令在本地文档目录中快速搜索特定关键词。

```bash
# 在命令行中搜索内容
grep -r "关键词" .

# 在编辑器中使用查找功能
# VS Code: Ctrl+Shift+F
# 其他编辑器: 相应快捷键
```

--------------------------------

### CodeExample 组件定义

Source: https://github.com/x-extends/vxe-table-docs/blob/main/_autodocs/08-演示系统.md

演示代码展示组件的结构说明。

```typescript
/**
 * 演示代码展示组件
 * 用途: 展示代码示例和实时效果
 * 
 * 结构:
 * 1. 左侧代码编辑器/显示
 * 2. 右侧实时效果预览
 */
```

--------------------------------

### 部署到服务器

Source: https://github.com/x-extends/vxe-table-docs/blob/main/_autodocs/09-构建和部署.md

构建项目后，通过 scp 或 rsync 将 dist 目录上传至服务器。

```bash
# 构建
npm run build:all

# 上传 dist 目录到服务器
scp -r dist/* user@server:/var/www/docs/

# 或使用 rsync
rsync -avz --delete dist/* user@server:/var/www/docs/
```

--------------------------------

### 配置 CI/CD 流程

Source: https://github.com/x-extends/vxe-table-docs/blob/main/_autodocs/09-构建和部署.md

使用 GitHub Actions 实现自动化构建与部署。

```yaml
# .github/workflows/build.yml
name: Build and Deploy

on:
  push:
    branches: [main]

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - uses: actions/setup-node@v2
        with:
          node-version: '18'
      
      - run: npm install
      - run: npm run build:all
      - run: npm run pack:all
      
      - name: Deploy
        uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./dist
```

--------------------------------

### 执行Oxfmt代码格式化

Source: https://github.com/x-extends/vxe-table-docs/blob/main/_autodocs/09-构建和部署.md

使用oxfmt工具格式化Rust代码。

```bash
# 格式化 Rust 代码
npm run oxfix:examples

# 实际命令
oxfmt dist/example/js/ --write
```

--------------------------------

### 构建 v4 版本

Source: https://github.com/x-extends/vxe-table-docs/blob/main/_autodocs/09-构建和部署.md

执行 v4 版本的依赖安装、开发模式启动、生产构建及文档打包流程。

```bash
# 进入目录
cd v4

# 安装依赖
npm install

# 开发模式
npm run serve

# 生产构建
npm run build

# 打包文档和示例
npm run pack

# 修复示例代码格式
npm run esfix:examples
npm run oxfix:examples
```

--------------------------------

### 执行ESLint代码检查

Source: https://github.com/x-extends/vxe-table-docs/blob/main/_autodocs/09-构建和部署.md

使用ESLint修复示例代码风格。

```bash
# 检查代码风格
npm run esfix:examples

# 实际命令
eslint --fix --cache --ext .js,.jsx,.ts,.tsx,.vue dist/example/js/**
```

--------------------------------

### 获取插件文档链接

Source: https://github.com/x-extends/vxe-table-docs/blob/main/_autodocs/06-API文档系统.md

拼接插件文档的完整URL路径。

```typescript
const getPluginDocsUrl = (row: RowVO): string => {
  return `${appStore.pluginDocsUrl}#/${row.pluginName}/${routePath}`
}
```

--------------------------------

### 代码检查与格式化命令

Source: https://github.com/x-extends/vxe-table-docs/blob/main/_autodocs/10-快速参考.md

执行 ESLint 检查修复及 Oxfmt 代码格式化。

```bash
npm run esfix:examples  # ESLint 检查和修复
npm run oxfix:examples  # Oxfmt 格式化
```

--------------------------------

### 修复类型错误

Source: https://github.com/x-extends/vxe-table-docs/blob/main/_autodocs/09-构建和部署.md

运行 vue-tsc 进行类型检查以定位构建中的类型错误。

```bash
# 运行类型检查
vue-tsc --noEmit

# 修复错误后重建
npm run build
```

--------------------------------

### 配置 ESLint 规则

Source: https://github.com/x-extends/vxe-table-docs/blob/main/_autodocs/10-快速参考.md

定义项目代码检查规则，继承 standard 和 vue3-recommended 配置。

```javascript
// .eslintrc.json
{
  "extends": [
    "standard",
    "plugin:vue/vue3-recommended"
  ],
  "rules": {
    "no-console": "warn",
    "no-debugger": "warn"
  }
}
```

--------------------------------

### 性能分析工具配置

Source: https://github.com/x-extends/vxe-table-docs/blob/main/_autodocs/10-快速参考.md

配置 Vue DevTools 及 Vite 性能分析插件。

```bash
# 启用 Vue DevTools
# 在 package.json 中添加
"devDependencies": {
  "@vue/devtools": "latest"
}

# 使用 Vite 的分析工具
npm install --save-dev vite-plugin-visualizer
```

--------------------------------

### 构建产物目录结构

Source: https://github.com/x-extends/vxe-table-docs/blob/main/_autodocs/09-构建和部署.md

生产构建生成的 dist 目录结构。

```text
dist/
├── index.html          # HTML 入口
├── assets/
│   ├── js/            # JavaScript 文件
│   ├── css/           # 样式文件
│   └── fonts/         # 字体文件
└── ...
```

--------------------------------

### PluginlLayout 组件路径

Source: https://github.com/x-extends/vxe-table-docs/blob/main/_autodocs/03-组件系统.md

插件文档专用布局组件的源文件路径。

```typescript
// 位置: src/components/PluginlLayout.vue
```

--------------------------------

### 导航与页脚组件路径

Source: https://github.com/x-extends/vxe-table-docs/blob/main/_autodocs/03-组件系统.md

PageAside、PageHeader 和 PageFooter 组件的源文件路径。

```typescript
// 位置: src/components/PageAside.vue
```

```typescript
// 位置: src/components/PageHeader.vue
```

```typescript
// 位置: src/components/PageFooter.vue
```

--------------------------------

### 初始化加载国际化消息

Source: https://github.com/x-extends/vxe-table-docs/blob/main/_autodocs/07-国际化系统.md

在应用启动时通过fetch获取默认语言文件，并在加载完成后挂载应用。

```typescript
// 应用启动时加载默认语言消息
fetch(`${resBaseUrl}/i18n/${defaultLanguage}.json?v=${timestamp}`)
  .then(res => res.json())
  .then(data => {
    i18n.global.setLocaleMessage(defaultLanguage, data)
    app.mount('#app')  // 国际化准备好后才挂载应用
  })
  .catch(error => console.error('加载国际化文件失败', error))
```

--------------------------------

### 配置 Nginx 服务器

Source: https://github.com/x-extends/vxe-table-docs/blob/main/_autodocs/09-构建和部署.md

配置 Nginx 以支持 Hash 路由并设置静态资源缓存策略。

```nginx
server {
  listen 80;
  server_name docs.vxeui.com;
  
  root /var/www/docs;
  index index.html;
  
  # 支持 Hash 路由
  location / {
    try_files $uri $uri/ =404;
  }
  
  # 缓存静态资源
  location ~* \.(js|css|png|jpg|svg)$ {
    expires 1y;
    add_header Cache-Control "public, immutable";
  }
  
  # 不缓存 HTML
  location ~* \.html$ {
    add_header Cache-Control "public, max-age=0";
  }
}
```

--------------------------------

### 添加新语言支持

Source: https://github.com/x-extends/vxe-table-docs/blob/main/_autodocs/10-快速参考.md

在 main.ts 中导入并注册新的国际化语言包。

```typescript
// 1. 在 src/main.ts 中导入
import newLang from 'vxe-pc-ui/lib/language/xx-XX'

// 2. 注册到 VxeUI
VxeUI.setI18n('xx-XX', newLang)

// 3. 下载对应的国际化 JSON 文件到服务器
// {resBaseUrl}/i18n/xx-XX.json
// {resBaseUrl}/component-api/i18n/xx-XX.json
```

--------------------------------

### 启用构建日志

Source: https://github.com/x-extends/vxe-table-docs/blob/main/_autodocs/09-构建和部署.md

通过环境变量启用详细的构建日志输出。

```bash
# 启用详细日志
DEBUG=* npm run build

# 或使用 Vite 的 logLevel
VITE_LOG_LEVEL=debug npm run build
```

--------------------------------

### getComponentApiConf(name: string)

Source: https://github.com/x-extends/vxe-table-docs/blob/main/_autodocs/04-状态管理.md

获取指定组件的 API 配置数据。

```APIDOC
## getComponentApiConf

### Description
获取指定组件的 API 配置。

### Parameters
- **name** (string) - Required - 组件名称 (如 'table', 'grid')

### Returns
- Promise<any> - 组件 API 配置数据
```

--------------------------------

### setTheme(name: 'dark' | 'light')

Source: https://github.com/x-extends/vxe-table-docs/blob/main/_autodocs/04-状态管理.md

切换文档和组件的主题模式，支持深色和浅色模式，并自动保存至本地存储。

```APIDOC
## setTheme

### Description
切换应用主题，更新 Vxe 主题、代码高亮及 DOM 属性。

### Parameters
- **name** ('dark' | 'light') - Required - 主题名称

### Example
```typescript
appStore.setTheme('dark');
```
```

--------------------------------

### 执行代码格式化与检查

Source: https://github.com/x-extends/vxe-table-docs/blob/main/_autodocs/10-快速参考.md

使用 npm 脚本进行代码风格格式化和静态代码分析。

```typescript
// 使用 Prettier
npm run format

// 检查代码
npm run lint
```

--------------------------------

### 应用启动资源预加载

Source: https://github.com/x-extends/vxe-table-docs/blob/main/_autodocs/05-路由系统.md

在应用入口处注册状态管理、路由和国际化插件。

```typescript
app.use(store)      // 状态管理
app.use(router)     // 路由
app.use(i18n)       // 国际化
```

--------------------------------

### 导入 Vue Router 模块

Source: https://github.com/x-extends/vxe-table-docs/blob/main/_autodocs/05-路由系统.md

在路由配置文件中引入必要的 Vue Router 类型和函数。

```typescript
import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router'
```

--------------------------------

### CDN 引入方式示例

Source: https://github.com/x-extends/vxe-table-docs/blob/main/_autodocs/08-演示系统.md

展示了通过 CDN 链接全量引入 vxe-table 并通过全局对象访问组件的方法。

```html
<!-- Vxe Table 完整包 -->
<script src="https://cdn.jsdelivr.net/npm/vxe-table/dist/vxe-table.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vxe-table/dist/style.css">

<script>
  const { VxeTable, VxeColumn } = window.VxeTable
</script>
```

--------------------------------

### 执行表格数据增删改

Source: https://github.com/x-extends/vxe-table-docs/blob/main/_autodocs/08-演示系统.md

通过操作响应式数组实现表格数据的动态更新。

```typescript
// 新增
const addRow = () => {
  tableData.value.push({ id: newId, name: '', status: '' })
}

// 删除
const deleteRow = (rowIndex) => {
  tableData.value.splice(rowIndex, 1)
}

// 更新
const updateRow = (rowIndex, newData) => {
  Object.assign(tableData.value[rowIndex], newData)
}
```

--------------------------------

### 处理树形数据结构

Source: https://github.com/x-extends/vxe-table-docs/blob/main/_autodocs/06-API文档系统.md

利用xe-utils库将扁平列表转换为树形结构，指定子级和父级关联字段。

```typescript
const handleTreeList = (treeList: any[]) => {
  // 使用 xe-utils 的 toTreeArray 转换为树形结构
  return XEUtils.toTreeArray(treeList, {
    children: 'list',           // 子级字段名
    parentKey: 'parentId',      // 父级key字段名
    key: 'id'                   // 主键字段名
  })
}
```

--------------------------------

### TypeScript 类型检查

Source: https://github.com/x-extends/vxe-table-docs/blob/main/_autodocs/09-构建和部署.md

在构建前运行类型检查的命令。

```bash
# 在构建前运行类型检查
vue-tsc --noEmit

# 或集成到构建命令
npm run build  # package.json 中配置 "vue-tsc && vite build"
```

--------------------------------

### 配置演示模块路由

Source: https://github.com/x-extends/vxe-table-docs/blob/main/_autodocs/05-路由系统.md

定义 /demo 路径下的嵌套子路由，用于展示不同功能的表格示例。

```typescript
{
  path: '/demo',
  component: PageLayout,
  children: [
    {
      path: 'list',
      name: 'DemoListPreview',
      component: DemoListPreview
    },
    { path: 'product', name: 'DemoProductPreview', component: DemoProductPreview },
    { path: 'compare', name: 'DemoComparePreview', component: DemoComparePreview },
    { path: 'realTime', name: 'DemoRealTimeReview', component: DemoRealTimeReview },
    { path: 'tree', name: 'DemoTreePreview', component: DemoTreePreview },
    { path: 'crud', name: 'DemoCrudPreview', component: DemoCrudPreview }
  ]
}
```

--------------------------------

### RouteLayout 组件路径

Source: https://github.com/x-extends/vxe-table-docs/blob/main/_autodocs/03-组件系统.md

二级路由布局组件的源文件路径。

```typescript
// 位置: src/components/RouteLayout.vue
```

--------------------------------

### 控制树形结构展开与折叠

Source: https://github.com/x-extends/vxe-table-docs/blob/main/_autodocs/06-API文档系统.md

根据搜索状态或默认需求控制树形表格的展开与折叠行为。

```typescript
// 默认全部展开
gridRef.value?.setAllTreeExpand(true)

// 按需展开 (搜索结果时)
gridRef.value?.setTreeExpand(rows, true)  // 展开匹配行

// 折叠未匹配的行
gridRef.value?.setAllTreeExpand(false)
```

--------------------------------

### setComponentsSize(size: VxeComponentSizeType)

Source: https://github.com/x-extends/vxe-table-docs/blob/main/_autodocs/04-状态管理.md

设置全局组件的尺寸大小。

```APIDOC
## setComponentsSize

### Description
设置全局组件的尺寸。

### Parameters
- **size** (VxeComponentSizeType) - Required - 尺寸类型 ('', 'small', 'normal', 'large')

### Example
```typescript
appStore.setComponentsSize('small');
```
```

--------------------------------

### 版本与辅助组件路径

Source: https://github.com/x-extends/vxe-table-docs/blob/main/_autodocs/03-组件系统.md

VersionList、CodeUseVersion 和 ApiLink 组件的源文件路径。

```typescript
// 位置: src/components/VersionList.vue
```

```typescript
// 位置: src/components/CodeUseVersion.vue
```

```typescript
// 位置: src/components/ApiLink.vue
```

--------------------------------

### 更新 API 文档语言配置

Source: https://github.com/x-extends/vxe-table-docs/blob/main/_autodocs/05-路由系统.md

在切换语言时触发 API 文档的重新加载，确保组件国际化资源同步更新。

```typescript
// src/store/app.ts
setLanguage(language) {
  // 自动调用 getComponentI18nJSON()
  // 获取该语言的 component-api/i18n/{language}.json
}
```

--------------------------------

### setPageLoading(status: boolean)

Source: https://github.com/x-extends/vxe-table-docs/blob/main/_autodocs/04-状态管理.md

设置页面的加载状态，用于控制全局加载遮罩的显示与隐藏。

```APIDOC
## setPageLoading

### Description
设置页面加载状态，控制全局加载指示器的显示。

### Parameters
- **status** (boolean) - Required - 是否显示加载中状态

### Example
```typescript
appStore.setPageLoading(true);
```
```

--------------------------------

### 组件状态管理

Source: https://github.com/x-extends/vxe-table-docs/blob/main/_autodocs/10-快速参考.md

通过 Pinia store 访问应用状态及调用状态管理方法。

```typescript
import { useAppStore } from '@/store/app'

const appStore = useAppStore()

// 访问状态
console.log(appStore.theme)
console.log(appStore.language)

// 调用方法
appStore.setTheme('dark')
appStore.setLanguage('en-US')
appStore.setPrimaryColor('#409EFF')
```

--------------------------------

### 编程式导航

Source: https://github.com/x-extends/vxe-table-docs/blob/main/_autodocs/10-快速参考.md

使用 vue-router 进行页面跳转，支持带参数的路由配置。

```typescript
import { useRouter } from 'vue-router'

const router = useRouter()

router.push({ name: 'DocsApi', params: { name: 'table' } })
router.push({ name: 'DemoListPreview' })
```

--------------------------------

### 语言切换管理

Source: https://github.com/x-extends/vxe-table-docs/blob/main/_autodocs/04-状态管理.md

切换文档语言并处理国际化资源加载。

```typescript
/**
 * 切换文档语言
 * @param language {VxeGlobalI18nLocale} - 语言代码
 */
setLanguage (language: VxeGlobalI18nLocale): void
```

```typescript
appStore.setLanguage('en-US')
appStore.setLanguage('zh-CHT')
appStore.setLanguage('ja-JP')
```

--------------------------------

### setLanguage(language: VxeGlobalI18nLocale)

Source: https://github.com/x-extends/vxe-table-docs/blob/main/_autodocs/04-状态管理.md

切换文档的国际化语言。

```APIDOC
## setLanguage

### Description
切换文档语言，并更新 VxeUI 和 vue-i18n 实例。

### Parameters
- **language** (VxeGlobalI18nLocale) - Required - 语言代码 (如 'zh-CN', 'en-US' 等)

### Example
```typescript
appStore.setLanguage('en-US');
```
```

--------------------------------

### 排查构建失败

Source: https://github.com/x-extends/vxe-table-docs/blob/main/_autodocs/09-构建和部署.md

通过清除缓存并重新安装依赖来解决构建失败问题。

```bash
# 清除缓存
rm -rf node_modules package-lock.json
npm install

# 重新构建
npm run build
```

--------------------------------

### NPM 安装与全局注册示例

Source: https://github.com/x-extends/vxe-table-docs/blob/main/_autodocs/08-演示系统.md

展示了通过 NPM 安装 vxe-table 并进行全局注册及在模板中使用的基本流程。

```typescript
// 1. NPM安装
npm install vxe-table

// 2. 全局注册
import VxeTable from 'vxe-table'
import 'vxe-table/es/style.css'

app.use(VxeTable)

// 3. 使用组件
<template>
  <vxe-table :data="tableData" :columns="tableColumns"></vxe-table>
</template>
```

--------------------------------

### 引入 Polyfills

Source: https://github.com/x-extends/vxe-table-docs/blob/main/_autodocs/10-快速参考.md

通过 core-js 自动包含必要的兼容性补丁。

```javascript
// 自动包含 core-js polyfills
import 'core-js/stable'
```

--------------------------------

### 配置虚拟滚动

Source: https://github.com/x-extends/vxe-table-docs/blob/main/_autodocs/06-API文档系统.md

通过设置scrollY属性启用Vxe Grid的虚拟滚动功能以优化性能。

```typescript
// 自动启用虚拟滚动
const gridOptions = {
  scrollY: {
    enabled: true,
    gt: 0  // 任何数据量都启用
  }
}
```

--------------------------------

### 更新日志示例

Source: https://github.com/x-extends/vxe-table-docs/blob/main/_autodocs/09-构建和部署.md

版本更新日志的 Markdown 格式规范。

```markdown
# 版本 0.1.0

## 新功能
- 新增 Table API 文档
- 新增 Grid 组件文档

## 改进
- 优化文档加载性能
- 改进搜索功能

## 修复
- 修复国际化显示问题
- 修复深色主题适配
```

--------------------------------

### 配置长期缓存策略

Source: https://github.com/x-extends/vxe-table-docs/blob/main/_autodocs/09-构建和部署.md

通过在文件名中包含 hash 值，实现静态资源的长期缓存。

```javascript
// 长期缓存
// 文件名包含 hash
dist/assets/js/main.[hash].js
dist/assets/css/style.[hash].css
```

--------------------------------

### 配置TypeScript编译器

Source: https://github.com/x-extends/vxe-table-docs/blob/main/_autodocs/09-构建和部署.md

tsconfig.json配置文件，定义编译目标及包含路径。

```json
{
  "compilerOptions": {
    "target": "ES2020",
    "useDefineForClassFields": true,
    "module": "ESNext",
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
  "references": [{ "path": "./tsconfig.node.json" }]
}
```

--------------------------------

### 查看项目源代码目录结构

Source: https://github.com/x-extends/vxe-table-docs/blob/main/_autodocs/00-目录.md

展示了项目 src 目录下的核心文件布局，包括入口文件、组件库、路由配置、状态管理及国际化配置。

```text
src/
├── main.ts                           # 应用入口
├── App.vue                           # 根组件
├── common/
│   ├── nav-config.ts                # 菜单配置
│   ├── nav.ts                       # 导航接口
│   ├── table.ts                     # 表格菜单
│   └── modules.ts                   # 模块导入
├── components/                      # 组件库
│   ├── PageLayout.vue               # 主布局
│   ├── PageApi.vue                  # API表格
│   ├── PageAside.vue                # 菜单栏
│   ├── PageHeader.vue               # 顶部栏
│   └── ... (其他组件)
├── router/
│   ├── index.ts                     # 主路由
│   ├── table.ts                     # 表格路由
│   └── grid.ts                      # Grid路由
├── store/
│   ├── app.ts                       # 应用存储
│   └── index.ts                     # 存储初始化
├── i18n/
│   └── index.ts                     # 国际化配置
├── views/                           # 页面和演示
└── styles/                          # 样式文件
```

--------------------------------

### 网格组件配置选项

Source: https://github.com/x-extends/vxe-table-docs/blob/main/_autodocs/06-API文档系统.md

配置VxeGridProps以定义表格的边框、工具栏、分页及滚动行为。

```typescript
const gridOptions: VxeGridProps<RowVO> = {
  border: true,               // 显示边框
  resizable: true,            // 列可调整
  showHeader: true,           // 显示表头
  highlight: true,            // 高亮行
  keepSource: true,           // 保持数据源
  autoResize: true,           // 自动调整
  
  // 工具栏配置
  toolbar: {
    enabled: true,
    import: false,
    export: false,
    print: false,
    refresh: false,
    zoom: false,
    custom: false
  },
  
  // 分页配置
  pagerConfig: null,          // 无分页
  
  // 排序和筛选
  sortConfig: { remote: false },
  filterConfig: { remote: false },
  
  // 数据加载
  loading: false,
  
  // 滚动配置
  scrollY: { enabled: true, gt: 0 }
}
```

--------------------------------

### Pinia 初始化配置

Source: https://github.com/x-extends/vxe-table-docs/blob/main/_autodocs/04-状态管理.md

在 src/store/index.ts 中创建并导出 Pinia 实例。

```typescript
// src/store/index.ts
import { createPinia } from 'pinia'

const store = createPinia()
export default store
```

--------------------------------

### 项目目录结构

Source: https://github.com/x-extends/vxe-table-docs/blob/main/_autodocs/01-项目概述.md

展示了 v4 版本项目的核心目录布局，包括组件、路由、状态管理及构建配置。

```text
v4/
├── src/
│   ├── components/         # 通用组件
│   ├── common/             # 通用配置和工具
│   ├── i18n/               # 国际化配置
│   ├── router/             # 路由定义
│   ├── store/              # Pinia 状态管理
│   ├── styles/             # 样式文件
│   ├── views/              # 页面和演示
│   ├── App.vue             # 根组件
│   └── main.ts             # 入口文件
├── public/                 # 静态资源
├── package.json            # 项目依赖
├── tsconfig.json           # TypeScript 配置
└── vite.config.ts          # Vite 配置
```

--------------------------------

### 本地存储初始化

Source: https://github.com/x-extends/vxe-table-docs/blob/main/_autodocs/04-状态管理.md

从 localStorage 读取配置以初始化应用状态。

```typescript
const currTheme = (localStorage.getItem('VXE_DOCS_THEME') || 'light') as 'dark' | 'light'
const currPrimaryColor = localStorage.getItem('VXE_DOCS_PRIMARY_COLOR') || ''
const currComponentsSize = (localStorage.getItem('VXE_DOCS_COMPONENTS_SIZE') || '') as VxeComponentSizeType
const currLanguage = (localStorage.getItem('VXE_DOCS_LANGUAGE') || 'zh-CN') as VxeGlobalI18nLocale
```

--------------------------------

### 实现文件导出功能

Source: https://github.com/x-extends/vxe-table-docs/blob/main/_autodocs/08-演示系统.md

利用 Blob 对象创建下载链接，实现将代码内容导出为文件。

```typescript
const exportCode = () => {
  const blob = new Blob([codeContent], { type: 'text/plain' })
  const url = URL.createObjectURL(blob)
  const a = document.createElement('a')
  a.href = url
  a.download = 'demo.vue'
  a.click()
}
```

--------------------------------

### 路由文件结构概览

Source: https://github.com/x-extends/vxe-table-docs/blob/main/_autodocs/05-路由系统.md

展示了项目路由配置文件的组织方式。

```text
src/router/
├── index.ts       - 主路由配置
├── table.ts       - 表格组件路由
└── grid.ts        - Grid组件路由
```

--------------------------------

### 配置根级路由

Source: https://github.com/x-extends/vxe-table-docs/blob/main/_autodocs/05-路由系统.md

定义根路径重定向及 404 路由处理逻辑。

```typescript
const routes: Array<RouteRecordRaw> = [
  {
    path: '/:pathMatch(.*)*',  // 404处理
    redirect: { name: 'StartTableInstall' }
  },
  {
    path: '/',
    redirect: { name: 'StartTableInstall' }  // 首页重定向到安装指南
  }
]
```

--------------------------------

### 路由错误处理

Source: https://github.com/x-extends/vxe-table-docs/blob/main/_autodocs/05-路由系统.md

配置通配符路由以处理 404 情况并重定向至指定页面。

```typescript
// 404处理
{
  path: '/:pathMatch(.*)*',
  redirect: { name: 'StartTableInstall' }
}
```

--------------------------------

### AppStore 状态类型定义

Source: https://github.com/x-extends/vxe-table-docs/blob/main/_autodocs/04-状态管理.md

定义 AppStore 中不同类别的状态结构，包括基础配置、主题语言、功能标记、URL 配置及数据缓存。

```typescript
{
  nowTime: string              // 构建时间戳
  pageLoading: boolean         // 页面加载状态
  pageTitle: string            // 页面标题
  packName: string             // 包名称 (从环境变量)
  serveTY: number              // 当前年份
  docsVersion: string          // 文档版本 (default: '4')
}
```

```typescript
{
  theme: 'dark' | 'light'      // 主题模式
  primaryColor: string         // 主色调
  componentsSize: string       // 组件尺寸 ('small'|'normal'|'large')
  language: string             // 当前语言
}
```

```typescript
{
  isExtendDocs: boolean        // 是否扩展文档
  isPluginDocs: boolean        // 是否插件文档
  isUtilDocs: boolean          // 是否工具函数文档
  showAuthMsgFlag: boolean     // 显示认证消息标记
  showTopMenuMsgFlag: boolean  // 显示顶部菜单消息标记
}
```

```typescript
{
  apiBaseUrl: string           // API基础URL (服务端)
  pubApiBaseUrl: string        // 公开API URL
  resBaseUrl: string           // 资源基础URL
  siteBaseUrl: string          // 站点基础URL
  pluginBuyUrl: string         // 插件购买链接
  pluginDocsUrl: string        // 插件文档链接
}
```

```typescript
{
  compApiMaps: Record<string, any[]> | null  // 组件API映射缓存
  systemConfig: {
    previewVersion: string     // 预览版本
    i18nVersion: string        // 国际化版本
    v3Version: string          // v3版本号
    v4Version: string          // v4版本号
  }
  versionConfig: Record<string, any>         // 版本配置映射
  pluginAppList: PluginApp[]                 // 插件应用列表
}
```

--------------------------------

### 配置Vite构建工具

Source: https://github.com/x-extends/vxe-table-docs/blob/main/_autodocs/09-构建和部署.md

vite.config.ts配置文件，包含插件设置及路径别名。

```typescript
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
import { createHtmlPlugin } from 'vite-plugin-html'
import { VitePluginZipPack } from 'vite-plugin-zip-pack'

export default defineConfig({
  plugins: [
    vue(),
    vueJsx(),
    createHtmlPlugin({
      minify: true
    }),
    new VitePluginZipPack({
      outDir: 'dist'
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  server: {
    port: 5173,
    open: true
  }
})
```

--------------------------------

### 定义Gulp构建任务

Source: https://github.com/x-extends/vxe-table-docs/blob/main/_autodocs/09-构建和部署.md

gulpfile.js中定义的构建示例、文档及压缩包任务。

```javascript
// gulpfile.js 定义的任务

// 构建示例
gulp.task('build_examples', ...)

// 构建文档
gulp.task('build_docs', ...)

// 创建压缩包
gulp.task('build_zip', ...)
```

--------------------------------

### 主要环境变量配置

Source: https://github.com/x-extends/vxe-table-docs/blob/main/_autodocs/10-快速参考.md

定义项目构建及运行时的基础配置项。

```env
VITE_APP_PACKAGE_NAME=vxe-table
VITE_APP_VXE_VERSION=4
VITE_APP_DATE_NOW={时间戳}
VITE_APP_PAGE_TITLE=Vxe Table v4
VITE_APP_IS_EXTEND_DOCS=false
VITE_APP_IS_PLUGIN_DOCS=false
VITE_APP_IS_UTIL_DOCS=false
VITE_APP_PUBLIC_API_URL=https://api.vxeui.com
VITE_APP_SERVEICE_API_URL=https://docs.vxeui.com/api
VITE_APP_RES_URL=https://docs.vxeui.com/resource
```

--------------------------------

### 日期格式化与本地化时间戳

Source: https://github.com/x-extends/vxe-table-docs/blob/main/_autodocs/07-国际化系统.md

使用 XEUtils 进行日期格式化，并利用 localStorage 存储本地化状态。

```typescript
import XEUtils from 'xe-utils'

// 按语言格式化日期
const dateStr = XEUtils.toDateString(new Date(), 'yyyy-MM-dd')

// 获取当前年份 (用于版权)
const year = new Date().getFullYear()
```

```typescript
// 初始化
const currLanguage = (localStorage.getItem('VXE_DOCS_LANGUAGE') || 'zh-CN')
const dateNow = XEUtils.toDateString(new Date(), 'yyyy-MM-dd')

// 检查是否需要显示消息
const showMsgFlag = localStorage.getItem('SHOW_AUTH_MSG_FLAG') !== dateNow
```

--------------------------------

### 更新组件API映射

Source: https://github.com/x-extends/vxe-table-docs/blob/main/_autodocs/06-API文档系统.md

初始化组件API映射数组，通过simplifyaApiPromise缓存请求以避免重复加载。

```typescript
/**
 * 更新和初始化组件API映射
 * 
 * 流程:
 * 1. 获取所有组件的API名称列表 (apiKeys.json)
 * 2. 为每个API创建空的映射数组
 * 3. 在用户访问时延迟加载详细数据
 * 
 * @return {Promise<void>}
 */
updateComponentApiJSON (): void {
  if (!simplifyaApiPromise) {
    simplifyaApiPromise = fetch(
      `${resBaseUrl}/component-api/${packName}-v${version}/apiKeys.json?v=${timestamp}`
    ).then(res => {
      return res.json().then(data => {
        const compApiMaps: Record<string, any[]> = {}
        data.forEach(name => {
          compApiMaps[name] = []  // 初始化为空数组
        })
        this.compApiMaps = compApiMaps
      })
    })
  }
}
```

--------------------------------

### 用户偏好设置本地存储键值

Source: https://github.com/x-extends/vxe-table-docs/blob/main/_autodocs/10-快速参考.md

用于在 localStorage 中存储用户的主题、颜色、尺寸及语言偏好。

```javascript
localStorage.VXE_DOCS_THEME              // 主题: 'dark' 或 'light'
localStorage.VXE_DOCS_PRIMARY_COLOR      // 主色调: 十六进制颜色
localStorage.VXE_DOCS_COMPONENTS_SIZE    // 组件尺寸: 'small', 'normal', 'large'
localStorage.VXE_DOCS_LANGUAGE           // 语言: 语言代码
```
Tokens:
Raw