Skip to content
/ X-UI Public

一个支持 Vue2、Vue3 和 React 的 PC 端配置化组件库,使用 Element-Plus、Element-UI、Ant Design 二次封装

License

Notifications You must be signed in to change notification settings

Sewar-x/X-UI

Repository files navigation

XW-UI

官方文档:XW-UI | Vue2 & Vue3 & React JSON configer Component Library (sewar-x.github.io)

  • 通用组件库:基于 ElementElement Plus Ant Design 组件库二次封装,使用 JSON 配置快速开发的中后台组件库。
  • Echart 组件
  • 插件:
    • xhttp 插件: 基于 axios 二次封装 http 请求插件,在 axios 基础上扩展功能;
    • vivien-permission:一个基于后台管理系统中的路由菜单权限控制系统,通过 vue-router 全局控制后台管理系统的菜单权限。

✨ 特性

  • ✂ 支持按需引入组件/插件。
  • 📦 开箱即用的 Vue2、Vue3、React 的组件库。
  • 🛡 使用 TypeScript 开发,提供完整的类型定义文件。
  • ⚙️ 通用组件库使用 JSON 配置快速开发。

🛠 组件和插件列表

该库目前包含以下组件和插件:

组件 介绍 插件
XElement 基于 element-ui 二次封装的通用组件库 xw-ui/element-ui
XElementPlus 基于 element-plus 二次封装的通用组件库 xw-ui/element-plus
XAntDesign 基于 ant-design 二次封装的通用组件库 xw-ui/ant-design
XEchart 基于 echarts 封装的 echarts 组件库
Xhttp 基于 axios 二次封装,在 axios 的基础上增加了一些功能的 http 请求库 xw-ui/xhttp
vivien-permission 基于后台管理系统中的路由菜单权限控制系统,通过 vue-router 全局控制后台管理系统的菜单权限插件 xw-ui/permission

🖥 兼容环境

  • 现代浏览器。

📦 安装

# NPM
npm install xw-ui

# Yarn
yarn install xw-ui

# pnpm
pnpm install xw-ui

依赖安装

XW-UI 是基于 ElementElement Plus Ant Design 组件库二次封装,请确保在你的项目需要预先安装以下插件/库:

组件库 依赖 版本
Element
vue ~2.6.0
element-ui ^2.15.6
Elment Plus
vue ^3.2.36
element-plus ^2.6.2
Ant Design
react ^18.2.0
react-dom ^18.2.0
antd ^4.21.7

使用 Element 组件库:安装 Vue2 和 Element

npm install vue@2.6.0  element-ui

使用 Element Plus 组件库:安装 Vue3 和 Element plus

npm install vue@3.2.36  element-plus

使用 Ant Design 组件库:安装 React 和 Ant Design

npm install react@18.2.0  react-dom@18.2.0 antd

About

一个支持 Vue2、Vue3 和 React 的 PC 端配置化组件库,使用 Element-Plus、Element-UI、Ant Design 二次封装

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published