Elegant-Admin:Element Plus 中后台系统开发模板

科技   2024-12-23 18:51   湖北  


文章底部获取项目地址



Elegant-Admin 是一个基于 Vue 3 的开源中后台系统开发模板,集成了常用的组件、Hooks、指令,以及路由和细粒度权限控制等功能,增强安全性和用户体验,支持前端静态路由和后端动态路由,内置 VSCode 插件配置,用以提高开发效率。
技术栈:Vue 3 + Vite 5 + TypeScript + Element-Plus + Unocss + Pinia + Axios。
安装环境:
Git、NodeJS >=18.0.0、pnpm >= 8.0.0。
部分页面预览:
安装使用:
// 安装
pnpm install
// 运行
pnpm run dev
// eslint 检测代码
pnpm lint:eslint
// 测试环境
pnpm run build:test
// 预发环境
pnpm run build:pre
//生产环境
pnpm run build:pro
浏览器支持:
内置 VSCode 插件配置:
{
  "recommendations": [
    "EditorConfig.EditorConfig",
    "mikestead.dotenv",
    "dbaeumer.vscode-eslint",
    "stylelint.vscode-stylelint",
    "Vue.volar",
    "antfu.unocss"
  ]
}
功能和特性:
最新技术栈:使用 Vue3、Vite 等前端技术,结合 pnpm(高性能的npm包管理器)来管理项目依赖。

TypeScript:作为应用程序级 JavaScript 的语言,TypeScript 提供了类型系统,帮助开发者在开发大型应用时捕捉到潜在的错误。

主题:支持丰富可配置的主题和暗黑模式,基于 UnoCSS 框架,使得样式更加灵活和可定制。

严格的代码规范:使用 antfu/eslint-config 作为基础规范,集成 ESLint、StyleLint 和 simple-git-hooks、lint-staged 等工具,确保代码的规范性和一致性。

权限路由:提供简易的路由配置,支持前端路由和后端动态路由,以适应不同的权限控制需求。

请求函数:基于 axios 的完善的请求函数封装,简化 HTTP 请求的处理。

模拟后台数据:使用 mock 技术模拟后台数据,方便前端开发和测试,无需等待后端 API 的完成。

表格封装:基于 Element Plus 封装的表格组件和表格查询组件,提高开发效率并保持界面的一致性。


《前端资源推荐》公众号收集各种前端组件 UI 框架、JS 插件工具、中后台系统模板、动画库、低代码、可视化资源、开源项目、学习资源、特效源码等,如有其他优秀资源,欢迎发消息投稿,感谢点赞、在看、转发、关注!!!

其他推荐


DPlayer:开源 H5 弹幕视频播放器

Arco Design Mobile:字节新开源移动端 UI 组件库

Fabricjs:交互式 canvas 图形绘制库

likeadmin:多语言 多终端 多应用 系统框架

Ant Design X:蚂蚁 AI 组件 打造人工智能对话应用

Excalidraw:支持多人协作 AI 辅助 可视化图形绘制
Quasar:Vue3 构建多模式应用 UI 组件库
howlerjs:Web 应用 2D/3D 音频控制库

项目地址


GitHub:https://github.com/zhangyao1990/elegant-admin

官方文档:https://zhangyao1990.github.io/elegant-admin-docs/

前端资源推荐
推荐分享各种前端组件UI、插件工具、中后台系统、低代码、可视化、开源项目、学习资源、特效源码等
 最新文章