前端权限参考
提供路由、菜单、角色和按钮控制的前端实现参考，帮助你理解后台权限在界面层的基本组织方式。
Skip to content 开源、稳定、可运行，
先把项目跑起来，
// 步骤_01 // 步骤_02 // 步骤_03
Art Design Pro 开源版
兼具设计美学与高效开发的后台模板
Art Design Pro 开源版是一套成熟的 Vue 中后台前端工程。它基于 Vue 3、TypeScript、Vite 与 Element Plus，提供路由菜单、权限控制、主题配置、表格表单、常用组件和精简脚本，适合自研系统、内部工具、二次开发和前端项目快速启动。
VueTypeScriptElement PlusVitePiniaTailwind
01开源版定位
开源、稳定、可运行，
把后台前端的基础能力整理成工程底座
主题与布局基础
提供主题色、布局模式、暗色模式和系统配置示例，便于在自己的项目里继续调整视觉风格。
清晰的代码落点
路由、组件、hooks、配置和工具函数分层明确，结合 TypeScript 与组合式 API，让项目接手、维护和二次开发更顺畅。
运行、改造与二次开发
先把项目跑起来，
再理解每个模块为什么这样放。
开源版本不仅提供页面示例，也提供一套可落地的前端工程组织方式：从启动、路由、主题到组件复用，再到按需清理示例。
克隆项目
获取开源仓库，按文档安装依赖并启动本地服务，先完整浏览项目能力和页面结构。
保留骨架
使用内置脚本清理演示数据，保留路由、主题、布局、表格和基础组件，得到干净开发环境。
接入业务
从已有页面中挑选可复用的部分，删除无关示例，再接入自己的接口、菜单和页面逻辑。
这个项目是开源免费的吗？
是的，开源版基于开源协议发布，可以免费使用、修改和参与共建。它适合作为中后台前端项目底座，用于自研系统、内部工具、后台模板改造和二次开发；如果需要客户项目交付授权、前后端完整源码或专属支持，可以查看商业授权方案。
开源版适合用于正式项目吗？
适合用于自研系统、内部工具和前端后台项目起步。开源版已经覆盖路由、菜单、权限、主题、表格表单、组件封装和状态管理等基础能力，你可以根据业务要求自行接入接口、调整页面并完善项目规范。
如何清理演示页面和示例数据？
项目内置一键精简脚本。建议先提交或备份代码，再在项目根目录执行 pnpm clean:dev，按提示输入 yes 后即可自动清理演示页面、组件、Mock 数据、路由多语言数据、示例代码和相关样式。
示例页面是否都需要保留？
不需要。示例页面主要用于展示组件组合、表格表单写法和常见业务界面，你可以按项目需要删除。删除前确认对应路由、菜单入口和 mock 数据也同步清理。
权限和路由应该从哪里开始看？
可以先看路由配置和菜单生成逻辑，再看登录后的用户信息、角色字段、按钮权限和页面级访问控制。理解这条链路后，再调整成后端返回菜单或前端静态配置都会更稳。
需要完整前后端和商业交付能力怎么办？
如果项目需要前后端完整源码、客户项目交付授权、部署指导、持续更新和专属支持，可以进入商业版页面选择对应授权版本。开源版与商业版面向不同使用边界，可以按项目场景选择。
从开源版启动你的后台前端
阅读快速开始，跑通本地项目，再进入文档查看路由、主题、权限、组件和工程结构。