# phpbest-web **Repository Path**: lostinyouu/phpbest-web ## Basic Information - **Project Name**: phpbest-web - **Description**: 一款开箱即用、高可配、高性能、风格精致、代码优雅的基于Vue3和elementPlus的WebUI前端框架，让前端开发更快乐。 - **Primary Language**: JavaScript - **License**: MIT - **Default Branch**: master - **Homepage**: https://lolicode.gitee.io/scui-doc/ - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 1471 - **Created**: 2025-12-31 - **Last Updated**: 2026-03-21 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README
![logo](https://lolicode.gitee.io/scui-doc/logo.png)

Vue.js Element Plus Vite Vuex

SCUI Admin

**一个现代化的中后台前端解决方案**
## 项目简介 SCUI 是一个基于 **Vue 3 + Vite + Element Plus** 构建的企业级中后台前端解决方案。项目采用最新的前端技术栈，内置丰富的业务组件和模板，旨在帮助开发者快速搭建高质量的中后台系统。 **核心理念：让一切复杂的东西傻瓜化** ## 技术栈 | 技术 | 版本 | 说明 | | --- | --- | --- | | [Vue.js](https://vuejs.org/) | 3.5.x | 渐进式 JavaScript 框架 | | [Vite](https://vitejs.dev/) | 6.x | 下一代前端构建工具 | | [Element Plus](https://element-plus.org/) | 2.13.x | 基于 Vue 3 的组件库 | | [Vue Router](https://router.vuejs.org/) | 4.x | Vue.js 官方路由 | | [Vuex](https://vuex.vuejs.org/) | 4.x | Vue.js 状态管理 | | [Axios](https://axios-http.com/) | 1.13.x | HTTP 客户端 | | [ECharts](https://echarts.apache.org/) | 6.x | 数据可视化图表库 | | [TinyMCE](https://www.tiny.cloud/) | 6.3.x | 富文本编辑器 | | [CodeMirror](https://codemirror.net/) | 5.x | 代码编辑器 | | [Vue I18n](https://vue-i18n.intlify.dev/) | 11.x | 国际化解决方案 | | [Sass](https://sass-lang.com/) | 1.x | CSS 预处理器 | ## 项目特性 ### 🧩 丰富的组件库 内置 28+ 个高质量业务组件： | 组件 | 说明 | | --- | --- | | `scTable` | 高级数据表格，支持列设置、分页、排序等 | | `scForm` | 动态表单组件 | | `scDialog` | 对话框组件 | | `scUpload` | 文件上传组件 | | `scEcharts` | ECharts 图表封装 | | `scEditor` | TinyMCE 富文本编辑器 | | `scCodeEditor` | CodeMirror 代码编辑器 | | `scIconSelect` | 图标选择器 | | `scFileSelect` | 文件选择器 | | `scFilterBar` | 高级筛选栏 | | `scCron` | Cron 表达式生成器 | | `scCropper` | 图片裁剪组件 | | `scQrCode` | 二维码生成器 | | `scVideo` | 西瓜视频播放器 | | `scWorkflow` | 工作流组件 | | `scWaterMark` | 水印组件 | | `scStatistic` | 统计数值组件 | | `scPasswordStrength` | 密码强度检测 | | ... | 更多组件持续更新中 | ### 🔐 完善的权限系统 - 基于 Token 的身份认证 - 动态路由权限控制 - 角色级别的菜单权限 - 按钮级别的操作权限 - 支持权限指令：`v-auth`、`v-auths`、`v-role` ### 🎨 灵活的布局系统 - **默认布局**：经典中后台布局 - **通栏布局**：顶部通栏导航 - **经典布局**：左侧菜单主导航 - **功能坞布局**：适合功能密集型应用 - 支持多标签页管理 - 支持面包屑导航 - 支持暗黑模式 ### 📦 其他特性 - **国际化**：内置多语言支持 - **主题定制**：支持动态主题色配置 - **代码分割**：优化的打包策略，按需加载 - **Mock 数据**：内置 API Mock 支持 - **配置热更新**：生产环境配置支持动态更新 - **TypeScript 就绪**：良好的类型支持（可选） ## 目录结构 ``` src/ ├── api/ # API 接口管理 │ ├── index.js # 统一导出 │ └── model/ # 接口模块 ├── assets/ # 静态资源 │ └── icons/ # 自定义 SVG 图标 ├── components/ # 公共组件 │ ├── scTable/ # 表格组件 │ ├── scForm/ # 表单组件 │ ├── scUpload/ # 上传组件 │ └── ... # 更多组件 ├── config/ # 配置文件 │ ├── index.js # 主配置 │ ├── route.js # 路由配置 │ └── ... # 其他配置 ├── directives/ # 自定义指令 │ ├── auth.js # 权限指令 │ ├── copy.js # 复制指令 │ └── ... ├── layout/ # 布局组件 │ ├── index.vue # 主布局 │ ├── components/ # 布局子组件 │ └── other/ # 其他布局 ├── locales/ # 国际化 │ └── lang/ # 语言包 ├── router/ # 路由配置 │ ├── index.js # 路由主文件 │ └── systemRouter.js # 系统路由 ├── store/ # Vuex 状态管理 │ ├── index.js # Store 入口 │ └── modules/ # Store 模块 ├── style/ # 全局样式 │ ├── style.scss # 主样式 │ ├── dark.scss # 暗黑模式 │ └── ... ├── utils/ # 工具函数 │ ├── request.js # Axios 封装 │ ├── tool.js # 通用工具 │ ├── permission.js # 权限工具 │ └── ... └── views/ # 页面视图 ├── home/ # 首页 ├── login/ # 登录页 ├── setting/ # 系统设置 ├── userCenter/ # 用户中心 └── ... ``` ## 快速开始 ### 环境要求 - Node.js >= 16.x - npm >= 8.x 或 pnpm >= 7.x ### 安装 ```bash # 克隆项目 git clone https://gitee.com/lolicode/scui.git # 进入项目目录 cd scui # 安装依赖 npm install # 或 pnpm install ``` ### 开发 ```bash # 启动开发服务器 npm run serve # 或 npm run dev ``` 启动后访问 http://localhost:2800 ### 构建 ```bash # 生产环境构建 npm run build # 预览构建结果 npm run preview ``` ### 代码检查 ```bash # 运行 ESLint npm run lint ``` ## 配置说明 ### 环境变量 项目支持多环境配置： | 文件 | 环境 | 说明 | | --- | --- | --- | | `.env.development` | 开发环境 | 本地开发配置 | | `.env.production` | 生产环境 | 线上部署配置 | | `public/config.js` | 生产配置 | 构建后可修改的配置 | ### 主要配置项 ```javascript // src/config/index.js { APP_NAME: 'SCUI', // 应用标题 API_URL: '/api', // 接口地址 TIMEOUT: 10000, // 请求超时时间 TOKEN_NAME: 'Authorization', // Token 名称 LAYOUT: 'default', // 默认布局 LANG: 'zh-cn', // 默认语言 // ...更多配置 } ``` ## 文档与演示 - 📖 [文档地址](https://lolicode.gitee.io/scui-doc/) - 🚀 [在线演示](https://lolicode.gitee.io/scui-doc/demo/#/login) ## 浏览器支持 | Chrome | Firefox | Safari | Edge | | --- | --- | --- | --- | | last 2 versions | last 2 versions | last 2 versions | last 2 versions | > **注意**：不支持 IE11 ## 开源协议 本项目基于 [MIT](LICENSE) 协议开源。 ## 鸣谢 感谢以下开源项目： - [Vue.js](https://vuejs.org/) - [Element Plus](https://element-plus.org/) - [Vite](https://vitejs.dev/) - [ECharts](https://echarts.apache.org/) --- 如果这个项目对你有帮助，欢迎 ⭐ Star 支持一下！