5分钟跑通 vue-vben-admin 工作台：从启动到改成自己的样子-北京尧图网络

5分钟跑通 vue-vben-admin 工作台从启动到改成自己的样子【免费下载链接】vue-vben-adminA modern vue admin panel built with Vue3, Shadcn UI, Vite, TypeScript, and Monorepo. Its fast!项目地址: https://gitcode.com/GitHub_Trending/vu/vue-vben-admin每天登录后台你第一件事想看什么多半是项目进展、没做完的事和几个关键数字。vue-vben-admin 的 workspace工作台模块就是干这个的欢迎语、项目卡片、快捷导航、待办列表、访问来源图表五块区域预置在一个页面里你改好数据就能当首页用。先跑起来这一节解决唯一的问题把 vue-vben-admin 工作台页面在浏览器里跑出来。先克隆仓库并进入目录git clone https://gitcode.com/GitHub_Trending/vu/vue-vben-admin cd vue-vben-admin pnpm install pnpm dev:play再装依赖项目要求 pnpm 11 以上低版本会直接被拦住。最后启动 playground 演示应用工作台页面就在这个应用里。浏览器打开http://localhost:5555用默认账号 vben、密码 123456 登录左侧菜单「概览 → 工作台」进入。界面全貌这一节回答工作台页面长什么样、各区域各管什么不贴代码。截图里左侧菜单能看到工作台入口页面主体就是下面这套卡片拼装。登录后进入工作台布局是左三右二两栏顶部是 WorkbenchHeader头像欢迎语一行描述文案左栏是项目卡片区WorkbenchProject和最新动态区WorkbenchTrends右栏自上而下是快捷导航、待办事项、访问来源环形图。说白了整页就是这六个组件拼出来的数据全部来自同一个文件。核心功能拆解这一节解决页面跑起来之后怎么改成你自己的内容。数据都集中在 workspace源码的 index.vue 里。怎么改项目卡片和快捷导航项目卡片和快捷导航各对应一个数据数组projectItems 和 quickNavItems。改 projectItems 里的每一项就是改一张卡片的标题、图标、颜色、分组和链接quickNavItems 结构相同少一个 group 字段。要改的就是 url 这一处http开头的走新窗口打开/开头的由 navTo 方法用 vue-router 页内跳转内外链可以混着配。const projectItems: WorkbenchProjectItem[] [ { color: #3fb27f, content: 现在的你决定将来的你。, date: 2021-04-01, group: 算法组, icon: ion:logo-vue, title: Vue, url: https://vuejs.org, }, ];改完保存刷新页面卡片和导航就变成你自己的列表。怎么对待办事项下手待办列表在右栏数据是 todoItems 数组每项四个字段title、content、date、completed。const todoItems refWorkbenchTodoItem[]([ { completed: false, content: 审查最近提交的前端代码确保代码质量。, date: 2024-07-30 11:00:00, title: 审查前端代码提交, }, ]);要改的是 completed 这一处true 就是已勾选。页面上点一下条目也会切换状态但刷新后回到初始值想持久化看下一节。进阶玩法这一节分三层递进改文案、接接口、按角色控制由轻到重。怎么改欢迎语和描述WorkbenchHeader 的标题是插槽名字取自userStore.userInfo?.realName是真实登录数据。想改语气直接重写插槽文案即可description 插槽里的天气行是静态字符串原样替换。怎么把静态数据换成接口把写死的数组换成请求调用多人用的时候数据才是真的。最小改动把 projectItems 改成 ref挂载时请求一次。const projectItems refWorkbenchProjectItem[]([]); onMounted(async () { projectItems.value await getProjectList(); // 换成你自己的请求函数 });请求函数可以复用项目里现成的 request 封装返回结果映射成 WorkbenchProjectItem 结构就行。怎么按角色显示不同内容在接口数据上再叠一层过滤从 store 里取用户角色把数组过滤后再传给组件不同人打开同一页看到不同列表。比如只把 group 为「算法组」的项目透传给算法组成员。不用写权限系统一行 filter 就达到八成效果。避坑与常见问题这三条是装完最容易卡住的地方。端口是 5555 不是 3100playground 演示应用的端口由.env.development里的 VITE_PORT 指定为 5555直接开 3100 会打不开。工作台页面只在 playground 里/dashboard/workspace这条路由定义在 playground 的路由模块里。apps 目录下的 web-* 演示应用默认没有这个页面想在自己的应用里用把 views 目录拷过去再接路由。数据默认是前端写死的几个数组都是演示数据不是后端接口返回的。接真实后端时先按上一节替换数据源否则你看到的始终是示例内容。工作台本质是一个「首页拼装」模板组件都备好了你只管把数据换进去。想继续深入两个入口值得看文档目录 docs/src/guide/introduction/以及承载 WorkbenchHeader、Project、QuickNav、Todo 四个组件的 packages/effects/common-ui/。【免费下载链接】vue-vben-adminA modern vue admin panel built with Vue3, Shadcn UI, Vite, TypeScript, and Monorepo. Its fast!项目地址: https://gitcode.com/GitHub_Trending/vu/vue-vben-admin创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考

5分钟跑通 vue-vben-admin 工作台：从启动到改成自己的样子

相关推荐

自恋型人格的双面性：从健康到病态的心理学解析

P2G两阶段建模全流程：电解水制氢与甲烷化Matlab仿真详解

Lynx Core Inspector 接口层剖析：运行时检查协调、Observer 契约与样式表数据结构

更多资讯

lowcode-engine 文档模型 DocumentModel 完全指南：属性、方法、事件与源码级实现解析

Faker 贡献指南：提交高质量 Pull Request 的完整流程（从分支同步到合并）

LogicFlow BPMN 导入导出完整指南：如何消除节点偏移、属性丢失与连线错乱的三大坑

从Mosquitto/EMQX到国产MQTT Broker：选型、许可证与迁移实战

Win11 C盘爆满？7个系统自带方法清理出107GB，附避坑指南

企业级Agent平台落地指南：从超级个体到超级团队的关键实践

今日更新

51单片机开环控制磁阻传感器的硬件匹配与代码实现

AI Agent安全操作数据库：SQL注入防御与参数化查询实战

Android逆向实战：还原激励类App签到接口的签名算法

本周精选

AI驱动的自动化专利分析平台技术解析

LeetCode-Go 题解：1252. Cells with Odd Values in a Matrix（奇数值单元格计数）双解法剖析

在线答疑系统Java毕设实战：Spring Boot前后端分离与状态流转

本月热门

基于YOLO的焊缝缺陷检测：从数据标注到工业部署全流程实践

分布式服务的决策记录

创业产品的首版范围

读完文章，想聊聊您的网站？