10 分钟跑通 Vben Admin：Vue3 中后台模板上手指南
10 分钟跑通 Vben AdminVue3 中后台模板上手指南【免费下载链接】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自己搭一套后台要配半天——路由、权限、请求拦截、国际化、主题一个个都得自己弄。Vben Admin 是基于 Vue 3、Vite、TypeScript 的开源中后台模板登录认证、动态路由权限、多语言、主题全打包好了clone 下来装依赖、跑一条命令就有一套能用的后台界面。动手前先备齐两样东西开工前确认本机两件事Node 版本22.18.0 及以上或 24.12.0 及以上node -v查看pnpm 版本11.0.0 及以上pnpm -v查看没有就先npm install -g pnpm装上。这个项目只认 pnpm 安装依赖别用 npm 或 yarn后面会报错。官方文档入口docs/src/guide/introduction/quick-start.md 是快速上手页docs/src/index.md 是完整文档首页。第一次跑起来一条命令后浏览器里有什么克隆仓库并安装依赖git clone https://gitcode.com/GitHub_Trending/vu/vue-vben-admin cd vue-vben-admin pnpm install安装需要几分钟完成后启动演示应用pnpm dev:play等终端打印出启动地址后浏览器打开 http://localhost:5555。你看到的是登录页左侧是深色科技风的 3D 插图和产品标语右侧是干净的登录表单用户名、密码还有一个“记住我”的勾选框。输入演示账号vben、密码123456点登录。进来是一块工作台左侧菜单树顶栏有搜索框和用户头像主区是带数据卡片和图表的仪表盘。所有数据都来自内置的 mock 服务你不需要真的连后端。动手验证两下换一次主题切一次语言先换主题。点顶栏右侧的设置图标打开偏好设置面板把主题模式改成“深色”再从预设色里挑一个主题色。整页配色当场变化——菜单、卡片、按钮全跟着走不用刷新页面。改回“浅色”即可还原。再切语言。默认是中文在设置面板里找到语言项切换到英文菜单文案、表单标签、页面提示会立刻整体替换不用刷新。顺带一提你选过的设置会存在浏览器 localStorage 里。以后如果改了playground/src/preferences.ts里的默认值却不生效清一下浏览器缓存再刷新。看懂代码放在哪把仓库当成“样板小区”不用背目录把它当成一个“样板小区”就懂了playground/是你刚跑起来的“样板间”功能最全新手改代码优先看这里apps/是五栋“不同装修风格的楼”web-antd、web-ele、web-naive、web-tdesign 等每栋都是一套完整的后台区别只在用的 UI 组件库选合团队口味的那个用packages/是“公共设施”布局、表单组件、权限控制、请求封装、国际化、状态管理都在这里各应用共用internal/是“物业”ESLint、构建配置、Tailwind 主题这类工程化配置跟业务页面无关docs/是“业主手册”也就是你刚看的文档站源码。所以想改侧边栏样式去 packages 里的布局包找想改登录流程去看应用里的src/store/auth.ts。先找到楼再找房间。新手三个坑现象、原因、处理npm install直接报“只允许 pnpm”。原因项目内置了 preinstall 校验只放行 pnpm 这个包管理器。处理改用pnpm installpnpm 没装就先执行npm install -g pnpm。跑了pnpm dev终端停住不出页面。原因pnpm dev是交互式选择让你从仓库里多个应用里挑一个启动不操作就一直等。处理直接用pnpm dev:play启动 playground 演示或pnpm dev:antd启动 Ant Design 版本页面默认在 5555 端口。登录一阵子后被弹回登录页提示“登录已过期”。原因mock 服务签发的访问令牌带较短有效期到期后按未登录处理这是产品设计的过期提醒不是你弄坏了什么。处理重新输入账号密码即可页面会重新走一遍认证。下一步做什么别停在跑起来。先读 docs/src/guide/introduction/quick-start.md看怎么把 mock 换成真实后端然后打开 playground/src/views/ 看页面是怎么组织的复制一个 demo 视图改个标题你就有了第一个自己写的后台页面。【免费下载链接】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），仅供参考
