企业官网建设流程全解析

15分钟跑通vue-vben-admin工作台：从安装到自定义的完整教程

【免费下载链接】vue-vben-adminA modern vue admin panel built with Vue3, Shadcn UI, Vite, TypeScript, and Monorepo. It's fast!项目地址: https://gitcode.com/GitHub_Trending/vu/vue-vben-admin

vue-vben-admin 的「工作台（Workspace）」模块，是登录后台后的操作中枢：欢迎语、项目卡片、快捷导航、待办事项、动态流和数据图表都摆在同一屏，让你打开页面 3 秒内知道今天干什么、点两下跳到任意业务页。本教程带你装好项目、进到这个页面，再把每个区块改成自己的样子。

上图是登录页，也就是进工作台前的必经入口。左侧是品牌区，右侧表单有用户名、密码两个输入框和"记住我"选项，填好点登录即可。后台内置了本地 Mock 接口，无需任何数据库就能跑起来。

零基础上手：4步进入工作台

第 1 步，克隆仓库：

git clone https://gitcode.com/GitHub_Trending/vu/vue-vben-admin

把项目源码下载到本地。

第 2 步，进入目录并安装依赖：

cd vue-vben-admin && pnpm install

pnpm是包管理器，monorepo 结构下它会一次性装好所有子包，首次安装耗时稍长。

第 3 步，启动 playground 应用（工作台就在这里）：

pnpm dev:play

该命令只启动 playground 这一个应用，比根目录的pnpm dev更轻量。终端出现 "Local" 地址后，开发服务器就绪。

第 4 步，浏览器打开http://localhost:5555，用内置账号vben/ 密码123456登录，左侧菜单展开"仪表盘"，点"工作台"（或直接访问http://localhost:5555/dashboard/workspace）。

🎉 至此你已经站在工作台页面上了。路由定义见 仪表盘路由模块，菜单项、路径、图标都配在那里。

界面逐块拆解

页面源码只有一个文件：工作台页面源码，六个区域全部来自@vben/common-ui的现成组件，页面本身只负责"摆数据 + 摆组件"。

欢迎区 WorkbenchHeader

它是页面顶部的头像 + 问候语横幅，数据来自登录后的用户信息（userStore.userInfo）。改<WorkbenchHeader>标签上的#title、#description插槽文案，就能换问候语。

项目区 WorkbenchProject

卡片墙，每个卡片含图标、分组标签、日期和一句描述。数据就是projectItems数组，组件实现见 工作台组件目录。增删数组项，卡片墙实时增减。

快捷导航 WorkbenchQuickNav

一列图标按钮，把高频页面收进一屏。数据是quickNavItems数组，每项一个url：以/开头走站内跳转，以http开头则新窗口打开外部网站——这段判断逻辑在页面的navTo函数里。

待办事项 WorkbenchTodo

任务清单，todoItems数组里每项有completed、title、content、date四个字段。组件自带点击勾选交互，改completed: true该项即显示已完成态。

最新动态 WorkbenchTrends

信息流列表，trendItems数组驱动，支持头像和富文本片段。

访问来源 AnalysisChartCard

右下角的饼图卡片，外壳AnalysisChartCard提供标题和边框，内容插槽里放的是 访问来源图表。完整的分析大盘在 analytics 页面，四个核心指标和流量趋势图都可以直接搬来复用。

动手改一改

🔧 三处最值得动的地方，全部只改 index.vue 一个文件。

改 1：换欢迎语。默认是"早安"文案，改成你自己的：

<WorkbenchHeader :avatar="userStore.userInfo?.avatar || preferences.app.defaultAvatar"> <template #title> {{ userStore.userInfo?.realName }}，今天也要保持输出！ <!-- 改这里 --> </template> <template #description> 本教程演示：工作台欢迎区自定义 </template> </WorkbenchHeader>

热更新后立即生效，姓名会自动取当前登录用户，无需硬编码。

改 2：加一个站内快捷导航。往quickNavItems数组末尾追加一项：

{ color: '#722ed1', // 按钮底色 icon: 'ion:git-branch-outline', // 图标（iconify 语法） title: '系统管理', url: '/system/user', // 必须是已存在的站内路由 },

刷新后导航列多出一个紫色按钮，点击跳用户管理页。

改 3：把项目卡变成内部入口。默认projectItems全是外部链接（打开新窗口），把某项的url换成站内路径即可变成本地跳转：

{ color: '', content: '权限演示：页面级控制。', date: '2024-07-30', group: '示例', icon: 'ion:key-outline', title: '权限管理', url: '/demos/access/page-control', // 以 / 开头 → 站内跳转 },

navTo会自动识别前缀，你不用改任何逻辑代码。

常见坑与疑问

点了快捷导航没反应，控制台还有报错？

navTo只认两种前缀：http（开新窗口）和/（站内跳转），其他值只会打印警告。检查你的url是否写成了localhost:5555/xxx这种形式——去掉协议头和域名，从斜杠开始写。

站内跳转后提示 404 或跳不动？

说明目标路由不存在。路由由 路由模块 同目录下的其他模块文件注册，先用浏览器地址栏确认路径真实存在，再填进url。

工作台是不是只有 playground 里有？

不是。apps/下每个 UI 库版本（antd、element-plus、naive、tdesign 等）都有一份结构相同的工作台页面，比如apps/web-antd/src/views/dashboard/workspace/index.vue，改法完全一致。

下一步

数据都通了之后，建议把projectItems、todoItems换成接口返回值——参考 快速开始文档 熟悉项目请求层，再看 analytics 大盘页面 学习多图表组合排版。字段含义不确定时，查 工作台类型定义，每个Workbench*Item的可选属性都列在那。

【免费下载链接】vue-vben-adminA modern vue admin panel built with Vue3, Shadcn UI, Vite, TypeScript, and Monorepo. It's fast!项目地址: https://gitcode.com/GitHub_Trending/vu/vue-vben-admin