shadcn-vue-admin 说明

缘起

从去年年末开始，我开始对 shadcn-vue 生态有了很多的兴趣。刚好那时候在 X 上刷到 React 生态的一个 shadcn-admin 库，看起来效果还不错。

当时 vue 生态中的 shadcn-vue 并不是特别流行（现在在国内也不太行🤣），我想我也可以为 vue 生态创建一个类似的库。所以 shadcn-vue-admin 就诞生了。

项目说明

目前的状态

目前已经有超过 20 个预制页面，并且对大部分屏幕都进行了适配，你可以去预览。如果有问题，欢迎来 GitHub 中提问题或者提交 PR。

使用的库

项目使用 shadcn-vue 作为UI基础。表格组件使用 tanstack-table。并且内置了 tanstack-query 的配置，你可以开箱即用。

所有外部仓库的配置你都可以在 src/plugins 文件夹中找到。

路由及布局

使用了vite-plugin-pages做文件路由，可以省去配置路由这一过程，只要将你的页面放置于 src/pages/ 目录下即可。如果你用过 nuxt，那么这个会很熟悉。如果你没有使用过文件路由，那么你可以去 vite-plugin-pages 文档中查看。

布局使用了vite-plugin-vue-layouts，如果你需要在页面中使用默认布局，不需要任何配置。如果需要其他类型的布局，只需要在 src/layouts/ 文件夹中加入你的布局文件，并在对应的页面代码中加入下面的代码即可。具体配置你可以查看 vite-plugin-vue-layouts 的文档。

<route lang="yaml">
  meta:
    layout: blank # 这里是你布局文件夹中布局文件的名称
</route>

代码风格及格式化

代码格式化使用 [https://github.com/antfu/eslint-config](antfu 的 eslint 配置)，如果您在 vscode 中开发，那么本项目已经配置好了保存文件自动格式化。以及我们会在 git 提交时进行一次文件的格式化校验，如果您的代码没有通过 eslint 校验，那么提交会被阻止。

关于 tailwind

一个tailwind v3 的版本已经可以预览。对于 tailwind v4 的支持也已经完成了 99%。只待 shadcn-vue 官网找到一个 tailwind v4 的图表库即可完全迁移成功。目前你可以在 migration-tailwiind-v4 分支查看已经迁移好的代码。图表库你可以自己找一下自己熟悉的，或者使用 ECharts 都可以。

接下来的打算

1. 持续跟进各种依赖库的更新
2. 添加对于 AI 模板的配置和示例
3. 优化各屏幕下的适配
4. 可能会搞一个 node 后端来做成一个全栈项目

结语

如果你有任何的问题或者建议，都欢迎你加入此项目。