[{"data":1,"prerenderedAt":223},["ShallowReactive",2],{"content:\u002Fposts\u002F2025\u002Fabout-shadcn-vue-admin":3,"surround:\u002Fposts\u002F2025\u002Fabout-shadcn-vue-admin":212},{"id":4,"title":5,"body":6,"canonical":190,"categories":191,"date":193,"description":194,"draft":195,"extension":196,"image":197,"meta":198,"navigation":199,"path":200,"permalink":190,"readingTime":201,"recommend":190,"references":190,"seo":206,"sitemap":207,"stem":208,"tags":209,"type":210,"updated":193,"__hash__":211},"content\u002Fposts\u002F2025\u002Fabout-shadcn-vue-admin.md","shadcn-vue-admin 说明",{"type":7,"value":8,"toc":175},"minimark",[9,13,25,34,37,41,50,53,74,82,85,98,111,121,124,133,137,150,153,169,172],[10,11,12],"h2",{"id":12},"缘起",[14,15,16,17,24],"p",{},"从去年年末开始，我开始对 shadcn-vue 生态有了很多的兴趣。刚好那时候在 X 上刷到 React 生态的一个 ",[18,19,23],"a",{"href":20,"rel":21},"https:\u002F\u002Fgithub.com\u002Fsatnaing\u002Fshadcn-admin",[22],"nofollow","shadcn-admin"," 库，看起来效果还不错。",[14,26,27,28,33],{},"当时 vue 生态中的 shadcn-vue 并不是特别流行（现在在国内也不太行🤣），我想我也可以为 vue 生态创建一个类似的库。所以 ",[18,29,32],{"href":30,"rel":31},"https:\u002F\u002Fgithub.com\u002FWhbbit1999\u002Fshadcn-vue-admin",[22],"shadcn-vue-admin"," 就诞生了。",[10,35,36],{"id":36},"项目说明",[38,39,40],"h3",{"id":40},"目前的状态",[14,42,43,44,49],{},"目前已经有超过 20 个预制页面，并且对大部分屏幕都进行了适配，你可以去",[18,45,48],{"href":46,"rel":47},"https:\u002F\u002Fshadcn-vue-admin.netlify.app\u002F",[22],"预览","。如果有问题，欢迎来 GitHub 中提问题或者提交 PR。",[38,51,52],{"id":52},"使用的库",[14,54,55,56,61,62,67,68,73],{},"项目使用 ",[18,57,60],{"href":58,"rel":59},"https:\u002F\u002Fwww.shadcn-vue.com\u002F",[22],"shadcn-vue"," 作为UI基础。表格组件使用 ",[18,63,66],{"href":64,"rel":65},"https:\u002F\u002Ftanstack.com\u002Ftable\u002Flatest",[22],"tanstack-table","。并且内置了 ",[18,69,72],{"href":70,"rel":71},"https:\u002F\u002Ftanstack.com\u002Fquery\u002Flatest",[22],"tanstack-query"," 的配置，你可以开箱即用。",[14,75,76,77,81],{},"所有外部仓库的配置你都可以在 ",[78,79,80],"code",{"code":80},"src\u002Fplugins"," 文件夹中找到。",[38,83,84],{"id":84},"路由及布局",[14,86,87,88,93,94,97],{},"使用了",[18,89,92],{"href":90,"rel":91},"https:\u002F\u002Fgithub.com\u002Fhannoeru\u002Fvite-plugin-pages",[22],"vite-plugin-pages","做文件路由，可以省去配置路由这一过程，只要将你的页面放置于 ",[78,95,96],{"code":96},"src\u002Fpages\u002F"," 目录下即可。如果你用过 nuxt，那么这个会很熟悉。如果你没有使用过文件路由，那么你可以去 vite-plugin-pages 文档中查看。",[14,99,100,101,106,107,110],{},"布局使用了",[18,102,105],{"href":103,"rel":104},"https:\u002F\u002Fgithub.com\u002FJohnCampionJr\u002Fvite-plugin-vue-layouts",[22],"vite-plugin-vue-layouts","，如果你需要在页面中使用默认布局，不需要任何配置。如果需要其他类型的布局，只需要在 ",[78,108,109],{"code":109},"src\u002Flayouts\u002F"," 文件夹中加入你的布局文件，并在对应的页面代码中加入下面的代码即可。具体配置你可以查看 vite-plugin-vue-layouts 的文档。",[112,113,119],"pre",{"className":114,"code":116,"language":117,"meta":118},[115],"language-html","\u003Croute lang=\"yaml\">\n  meta:\n    layout: blank # 这里是你布局文件夹中布局文件的名称\n\u003C\u002Froute>\n","html","",[78,120,116],{"__ignoreMap":118},[38,122,123],{"id":123},"代码风格及格式化",[14,125,126,127,132],{},"代码格式化使用 [",[18,128,131],{"href":129,"rel":130},"https:\u002F\u002Fgithub.com\u002Fantfu\u002Feslint-config%5D(antfu",[22],"https:\u002F\u002Fgithub.com\u002Fantfu\u002Feslint-config](antfu"," 的 eslint 配置)，如果您在 vscode 中开发，那么本项目已经配置好了保存文件自动格式化。以及我们会在 git 提交时进行一次文件的格式化校验，如果您的代码没有通过 eslint 校验，那么提交会被阻止。",[38,134,136],{"id":135},"关于-tailwind","关于 tailwind",[14,138,139,140,143,144,149],{},"一个tailwind v3 的版本已经可以",[18,141,48],{"href":46,"rel":142},[22],"。对于 tailwind v4 的支持也已经完成了 99%。只待 shadcn-vue 官网找到一个 tailwind v4 的图表库即可完全迁移成功。目前你可以在 ",[18,145,148],{"href":146,"rel":147},"https:\u002F\u002Fgithub.com\u002FWhbbit1999\u002Fshadcn-vue-admin\u002Ftree\u002Fmigration-tailwind-v4",[22],"migration-tailwiind-v4 分支","查看已经迁移好的代码。图表库你可以自己找一下自己熟悉的，或者使用 ECharts 都可以。",[10,151,152],{"id":152},"接下来的打算",[154,155,156,160,163,166],"ol",{},[157,158,159],"li",{},"持续跟进各种依赖库的更新",[157,161,162],{},"添加对于 AI 模板的配置和示例",[157,164,165],{},"优化各屏幕下的适配",[157,167,168],{},"可能会搞一个 node 后端来做成一个全栈项目",[10,170,171],{"id":171},"结语",[14,173,174],{},"如果你有任何的问题或者建议，都欢迎你加入此项目。",{"title":118,"searchDepth":176,"depth":176,"links":177},4,[178,180,188,189],{"id":12,"depth":179,"text":12},2,{"id":36,"depth":179,"text":36,"children":181},[182,184,185,186,187],{"id":40,"depth":183,"text":40},3,{"id":52,"depth":183,"text":52},{"id":84,"depth":183,"text":84},{"id":123,"depth":183,"text":123},{"id":135,"depth":183,"text":136},{"id":152,"depth":179,"text":152},{"id":171,"depth":179,"text":171},null,[192],"代码","2025-04-20 16:38:09","有关 shadcn-vue-admin 模板的说明。shadcn-vue-admin是一个管理仪表板，采用 Shadcn-vue、Vue3 和 Vite 精心打造。构建时充分考虑了响应能力和可访问性。这是一个起始（模板）项目，后续会增加更多组件。",false,"md","https:\u002F\u002Fbitmc.uno\u002Fpicgo\u002FShadcn-Vue-Admin-Dashboard.png",{},true,"\u002Fposts\u002F2025\u002Fabout-shadcn-vue-admin",{"text":202,"minutes":203,"time":204,"words":205},"4 min read",3.375,202500,675,{"title":5,"description":194},{"loc":200},"posts\u002F2025\u002Fabout-shadcn-vue-admin",[],"story","3z4v-ht7hSz2MMLhHso-cctG2uzkQufGRNKBOaSnMiU",[213,218],{"title":214,"path":215,"stem":216,"date":217,"type":210,"children":-1},"逃离北京","\u002Fposts\u002F2025\u002Fescape-from-beijing","posts\u002F2025\u002Fescape-from-beijing","2025-03-17 20:16:05",{"title":219,"path":220,"stem":221,"date":222,"type":190,"children":-1},"hono 集成 Better Auth","\u002Fposts\u002F2025\u002Fbetter-auth","posts\u002F2025\u002Fbetter-auth","2025-04-24 17:47:42",1789642589754]