别再从零搭后台nuxt-shadcn-dashboard 让你半小时拥有生产级 Nuxt 4 仪表盘【免费下载链接】nuxt-shadcn-dashboardTemplate Dashboard with Nuxt 4 Shadcn TailwindCSS 4项目地址: https://gitcode.com/gh_mirrors/nu/nuxt-shadcn-dashboard每次搭管理后台侧边栏、数据表格、主题切换都得从头写光 UI 骨架就能耗掉一周。nuxt-shadcn-dashboard 是一套 Nuxt 4 Shadcn Vue TailwindCSS 4 的管理后台模板把仪表盘、任务表、看板、认证页直接做成了现成页面。用它起步UI 层面的重复开发基本能省掉 2~3 周。它是什么项目速览nuxt-shadcn-dashboardMIT 协议的开源仪表盘模板当前版本 v1.0.2解决的是后台 UI 骨架反复重做的问题布局、侧边栏、主题、组件库、常用业务页全部内置技术栈Nuxt 4、Shadcn Vue基于 reka-ui、TailwindCSS 4全项目 TypeScript适合有 Vue 3 基础、需要快速交付后台的团队或个人想给项目配管理端的人跑起来只需要这几条命令要求 Node 22.x、pnpm 9git clone https://gitcode.com/gh_mirrors/nu/nuxt-shadcn-dashboard cd nuxt-shadcn-dashboard pnpm install pnpm dev它到底能帮你省掉哪些活组件库60 组件覆盖后台常见需求app/components/ui/下内置了 60 多个组件数据展示、表单输入、导航、反馈四类场景都有现成答案。几个关键点的底层实现都选得比较扎实表格基于 tanstack/vue-table排序、筛选、分页开箱即用表单组合 vee-validate zod还带 auto-form 可以从 schema 直接生成图表提供折线、柱状、面积、环形四种基于 unovis 渲染。组件展示页在 components/ 路由组下每个组件一页可以直接当用法参考。主题与侧边栏改一处配置换整套外观主题色、明暗模式、侧边栏形态全部集中在app/app.config.ts这一个入口里配置。仓库里的app/composables/useAppSettings.ts负责把这份默认配置和用户在浏览器里的选择合并再持久化到 cookie所以设置页里切换主题会即时生效appSettings: { sidebar: { collapsible: offcanvas, // offcanvas | icon | none side: left, // left | right variant: inset, // sidebar | floating | inset }, theme: { color: default, // 9 种主题色可选 type: scaled, // default | mono | scaled }, }业务页面仪表盘、数据表、看板开箱即用app/pages/按路由组划分auth登录、注册、OTP 验证、忘记密码、error401/403/404/500/503 五种错误页、settings资料、外观、通知等设置页外加首页仪表盘、tasks、kanban、email 四个独立页面。首页是四张统计卡片加访客趋势图带时间范围筛选tasks 页是一张完整数据表支持列排序、分面筛选、分页和行操作kanban 页支持拖拽排序数据落在 localStorage刷新不丢。从 clone 到本地跑通3 步搞定克隆仓库git clone https://gitcode.com/gh_mirrors/nu/nuxt-shadcn-dashboard进入目录安装依赖pnpm installpostinstall 会自动执行 nuxt prepare启动开发服务器pnpm dev浏览器打开 http://localhost:3000跑起来之后可以先调的几个可选配置可选配置说明侧边栏 collapsible / side / variant折叠方式 offcanvas、icon、none位置左/右形态 sidebar、floating、inset主题 color / type9 种主题色default、scaled、mono 三种类型生效方式改配置后需清除浏览器 app_settings cookie或在设置页在线切换构建与部署只需要这几条pnpm build pnpm preview pnpm generate哪些项目类型用它最顺手内部管理后台CRM、运维、审批这类系统要的就是侧边栏 数据表 表单模板的骨架和这些需求高度重合你只需要接上自己的 API数据看板与监控页统计卡片、四类图表、时间范围筛选组件都是现成的精力可以全放在数据层项目自带的管理端给开源项目或个人作品补一个管理后台时看板页和任务页可以直接复用不用自己造架构与工程实践状态管理Pinia 通过 pinia/nuxt 集成应用级设置则走 cookie 持久化的 useAppSettings composable不依赖 store性能Nuxt 4 按路由自动代码分割nuxt/icon 和 nuxt/fonts 按需加载图标与字体避免整包引入可访问性组件基于 reka-uiRadix 的 Vue 实现ARIA 属性和键盘导航是默认行为不用逐个补表单校验vee-validate zodauto-form 组件支持从 schema 直接渲染表单工程化ESLintantfu 风格 vue-tsc 类型检查lint 和 typecheck 都在 npm scripts 里路由组织app/pages/下用括号目录划分 auth、error、components、settings 四个路由组页面加路由互不干扰社区状态与贡献入口项目由独立开发者维护当前发布到 v1.0.2用 release-it 管理版本仓库里配了 Renovate依赖升级走自动化 PR所以 Nuxt、TailwindCSS 这些核心依赖版本跟得比较紧。参与方式提 issue报告 bug 或提功能请求提 PR改进组件、修样式或新增业务页面完善文档components/ 路由组下每个组件都有对应展示页缺示例的都可以补之前搭后台要重写一遍侧边栏、表格和主题切换的活现在 clone 下来改改就能开工。这套模板的价值很直白UI 骨架和常见业务页全部就位你只管接数据。如果你正在找一套能直接落地的 Nuxt 后台脚手架值得花十分钟 clone 下来跑一遍。【免费下载链接】nuxt-shadcn-dashboardTemplate Dashboard with Nuxt 4 Shadcn TailwindCSS 4项目地址: https://gitcode.com/gh_mirrors/nu/nuxt-shadcn-dashboard创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考