技术文档

打开导航菜单

PIG AI Guide
============

切换主题搜索

[](https://wwads.cn/click/bait)[![](https://cdn.wwads.cn/creatives/tCsMFF956EX0JzAB8kkMuGpAUwWcW7KoJnzN1fY5.jpg)
](https://wwads.cn/click/bundle?code=9jhZ2FXcnCRpk9xUn1XCDu9dgxbnga)

[🛒 B2B2C商家入驻平台系统java版 **Java+vue+uniapp** 功能强大 稳定 支持diy 方便二开](https://wwads.cn/click/bundle?code=9jhZ2FXcnCRpk9xUn1XCDu9dgxbnga)[广告](https://wwads.cn/?utm_source=property-270&utm_medium=footer "点击了解万维广告联盟")

PIGX 技术指南
=========

适配 5.0 以上单体和微服务版本

PIGX 技术指南PIG

⌘K

参与开发

快速上手

前端部分

浏览器兼容性前端配置项说明前端ENV环境配置前端目录结构前端首页组件开发前端国际化配置前端字体图标配置前端图表功能前端权限管理前端数据状态管理前端组件路由管理前端标签页管理前端字典工具使用前端参数工具使用前端通用工具函数省市区街四级联动组件前端代码编辑组件前端富文本组件前端表格组件前端表格分页组件前端表格工具栏组件前端上传组件前端左侧查询树前端文字提示组件前端悬浮输入组件前端组织架构组件前端标签列表组件前端表单校验

功能使用

后端部分

扩展必看

生产部署

社区分享

更新日志

更新日期: 2025-10-23

最后更新: 2025/8/19

切换主题

前端首页组件开发
========

![](https://minio.pigx.top/oss/202403/1711008130.png)

[](#开发组件)开发组件
-------------

*   在 src/views/home/widgets/components 目录下创建组件

![](https://minio.pigx.top/oss/202403/1711008491.png)

[](#挂载组件)挂载组件
-------------

*   在 src/views/home/widgets/index.vue 中挂载组件，将 myGrid 数组增加上一步创建的组件文件名称

```


 `const myGrid =  [    'test-demo',    ];`




```

![](https://minio.pigx.top/oss/202403/1711008679.png)

### 本页导航

开发组件

挂载组件