vue-vben-admin 工作台实战4 个高频场景从启动到按需改造一篇讲透【免费下载链接】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-adminvue-vben-admin 是 Vue3 加 Vite 的后台管理模板工作台Workspace是它登录后最直观的一屏项目卡片、快捷导航、待办清单和统计图表同屏展示。读完后你能把工作台跑起来分清 5 个子组件各自的数据从哪来并把项目列表和图表换成你自己业务的数据。克隆仓库到打开工作台4 步就够克隆仓库并进入目录git clone https://gitcode.com/GitHub_Trending/vu/vue-vben-admin cd vue-vben-admin安装依赖pnpm install预期所有 workspace 子包依赖装完无红字报错。启动开发服务器pnpm dev预期playground 前端和 mock 服务同时启动终端打印访问地址。浏览器打开http://localhost:5320/dashboard/workspace用演示账号登录即可看到工作台页面。先看地图工作台的 5 个子组件工作台页面由一个 Vue 文件组合而成工作台主组件 的布局就是左三右二两列。所有子组件都来自vben/common-ui包源码集中在 packages/effects/common-ui/src/ui/dashboard/workbench/。组件作用数据在哪改WorkbenchHeader欢迎区显示头像、姓名、天气主组件插槽第 238-245 行WorkbenchProject项目卡片列表projectItems数组WorkbenchQuickNav快捷导航宫格quickNavItems数组WorkbenchTodo待办清单可勾选完成todoItems数组WorkbenchTrends最新动态时间线trendItems数组AnalysisChartCard图表卡片容器内部再塞图表组件右侧的访问来源图表是一个独立的 ECharts 饼图源码在 analytics-visits-source.vue。把项目卡片接到你的业务入口适用场景团队想让常用系统、文档站出现在首页而不是 GitHub、Vue 官网这些示例链接。// playground/src/views/dashboard/workspace/index.vue const projectItems: WorkbenchProjectItem[] [ { color: #3fb27f, content: 现在的你决定将来的你。, date: 2021-04-01, group: 算法组, icon: ion:logo-vue, title: Vue, url: https://vuejs.org, }, // ... ];这段代码定义了左侧项目卡片icon是 Iconify 图标名title和content是卡片文字。function navTo(nav: WorkbenchProjectItem | WorkbenchQuickNavItem) { if (nav.url?.startsWith(http)) { openWindow(nav.url); // 外链新窗口打开 return; } if (nav.url?.startsWith(/)) { router.push(nav.url); // 站内路由跳转 } }navTo是全站唯一跳转入口靠url前缀区分外链和站内路由。改哪一行把url换成/dashboard这类站内路径就是站内跳转换成https://开头就是外链。增删数组元素就能增删卡片。增删快捷导航只动一个数组适用场景你的系统里有工单审批等高频入口希望一键到达。const quickNavItems: WorkbenchQuickNavItem[] [ { color: #1fdaca, icon: ion:home-outline, title: 首页, url: /, }, // ... ];五个字段四个够用color定底色、icon定图标、title定文案、url定去处。改哪一行照着现有元素抄一份改title和url即可。图标不限于 ion 系列任何 Iconify 图标名都行本地 SVG 用svg:头像名写法trendItems里就有示例。把演示饼图换成你的统计口径适用场景首页的访问来源想换成部门、渠道、产品线等自己的维度。// analytics-visits-source.vue 的 onMounted 中 renderEcharts({ series: [ { color: [#5ab1ef, #b6a2de, #67e0e3, #2ec7c9], data: [ { name: 搜索引擎, value: 1048 }, { name: 直接访问, value: 735 }, ], name: 访问来源, type: pie, // ... }, ], });这是 ECharts 配置data数组决定饼图每一块的名称和数值color决定配色。改哪一行只改data里的name和value就完成换数据改series里的name字段图表标题同步变化。让待办清单可勾选、可持久适用场景你希望用户勾选待办后状态保留而不只是页面内生效。const todoItems refWorkbenchTodoItem[]([ { completed: false, content: 审查最近提交到 Git 仓库的前端代码。, date: 2024-07-30 11:00:00, title: 审查前端代码提交, }, // ... ]);每项 4 个字段completed控制是否划掉。workbench-todo.vue 里复选框用v-model直接改这个字段所以勾一下本地状态立刻变。改哪一行把ref初始化挪到onMounted的接口回调里勾选时在组件外层监听变化并发 PATCH状态就能落到后端。从 Demo 到生产的改造方向数据接 APIprojectItems、quickNavItems、todoItems、trendItems四个数组全部改成接口返回数组结构照 typing.ts 的接口定义来类型不会报错。权限过滤拿到用户角色后在渲染前过滤导航项和项目项没权限的入口直接不显示。多空间/多租户按当前租户 ID 请求各自的项目和待办页面代码不用动。mock 与真实后端开发期 mock 服务在 5320 端口/api请求经 playground/vite.config.ts 的 proxy 转发部署到生产后 mock 不启动需自行接接口。新手最容易踩的 3 个坑内部路由没跳过去url必须以/开头http开头走新窗口其他格式navTo只会打警告。图标不显示图标名必须能解析到 Iconify 图标写错时卡片图标是空白浏览器控制台无报错换个图标名试试。pnpm dev起的是哪个应用默认起 playground演示账号vben密码123456如果你起的是dev:antd等其他应用要看对应apps/下的 views 目录。工作台本质是一个页面加五个数据数组改数组换内容接上接口即可生产。更多用法看 docs/src/guide/introduction/ 的入门文档playground/src/views/dashboard/ 下有完整可运行的示例代码。【免费下载链接】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），仅供参考