[{"data":1,"prerenderedAt":159},["ShallowReactive",2],{"page-/post/nuxt/nuxt-ui-framework-recommend":3,"surrounding-page":150},{"id":4,"title":5,"author":6,"body":7,"date":137,"description":138,"extension":139,"group":6,"lastmod":140,"meta":141,"navigation":142,"path":143,"rawbody":144,"seo":145,"showTitle":6,"stem":146,"tags":147,"versions":6,"__hash__":149},"content/post/nuxt/nuxt-ui-framework-recommend.md","目前对我而言开发Nuxt最舒适的UI框架",null,{"type":8,"value":9,"toc":134},"minimark",[10,19,39,53,59,69,79,86,89,104,123,128,131],[11,12,13,14,18],"p",{},"对于 ",[15,16,17],"code",{},"Nuxt"," 来说，有很多前端 UI 框架可以选择。",[11,20,21,22,25,26,29,30,33,34,38],{},"比如官方的 ",[15,23,24],{},"NuxtUI"," 、",[15,27,28],{},"NuxtUI Pro","，以及我的博客最开始用的框架 ",[15,31,32],{},"Primevue","，都算是比较",[35,36,37],"strong",{},"省心","的框架。",[11,40,41,42,44,45,48,49,52],{},"但是对我来说，这几个框架用在 ",[15,43,17],{}," 上就像是 ",[15,46,47],{},"ElementUI"," 用在了 ",[15,50,51],{},"Vue"," 的后台管理系统上一样，确实省事，也足够标准，但是前提都是你不会去二开他们的样式和功能。",[11,54,55,56,58],{},"一但现有的样式不满足你的审美，某个组件的功能差强人意，但心里就是感觉膈应。一切就不是那么美好了。仿佛是某个客户要求你把 ",[15,57,47],{}," 的样式全都大改一遍，以达到他们心中的高端形象。",[11,60,61,62,65,66],{},"所以我最终选择的是 ",[15,63,64],{},"shadcn/vue"," + ",[15,67,68],{},"inspira-ui",[11,70,71,74,75,78],{},[15,72,73],{},"shadcn/ui"," 在 React 那边是很火的，可能有人不知道他也有一个 ",[15,76,77],{},"vue"," 的版本。",[11,80,81],{},[82,83],"img",{"alt":84,"src":85},"","https://img.zzao.club/article/202505131443401.png",[11,87,88],{},"使用方式是把组件下载到项目本地，所以给了你最大的可控性。",[11,90,91,92,95,96,99,100,103],{},"同时里面的有些组件，比如 ",[15,93,94],{},"sonner"," ，用的是 ",[15,97,98],{},"vue-sonner","，已经是经过很多人验证的，在 toC 领域算是很美观的交互组件。还有 ",[15,101,102],{},"drawer"," 也是类似的情况，我觉得还是蛮方便的，把好用的组件都集合在一起。",[11,105,106,108,109,111,112,115,116,119,120,122],{},[15,107,68],{},"是对 ",[15,110,64],{}," 的一个补充和升级，主要用来实现一些炫酷的动画、特效。灵感来自于 ",[15,113,114],{},"Aceternity UI",", ",[15,117,118],{},"Magic UI","，填补了 ",[15,121,77],{}," 生态下相关组件的空白。",[11,124,125],{},[82,126],{"alt":84,"src":127},"https://img.zzao.club/article/202505131443403.png",[11,129,130],{},"有这两个组件库，外加 tailwindcss ，不管是开发管理系统，还是面向用户的美观页面，都没有发现不够用的地方。",[11,132,133],{},"推荐你也去试一试～",{"title":84,"searchDepth":135,"depth":135,"links":136},2,[],"2025-05-13T00:00:00.000Z","选择 shadcn/vue 和 inspira-ui 的理由","md","2025-08-19T00:00:00.000Z",{},true,"/post/nuxt/nuxt-ui-framework-recommend","---\ntitle: 目前对我而言开发Nuxt最舒适的UI框架\ndate: 2025-05-13\nlastmod: 2025-08-19\ntags: [\"Nuxt\", \"UI\"]\ndescription: 选择 shadcn/vue 和 inspira-ui 的理由\n---\n对于 `Nuxt` 来说，有很多前端 UI 框架可以选择。\n\n比如官方的 `NuxtUI` 、`NuxtUI Pro`，以及我的博客最开始用的框架 `Primevue`，都算是比较**省心**的框架。\n\n但是对我来说，这几个框架用在 `Nuxt` 上就像是 `ElementUI` 用在了 `Vue` 的后台管理系统上一样，确实省事，也足够标准，但是前提都是你不会去二开他们的样式和功能。\n\n一但现有的样式不满足你的审美，某个组件的功能差强人意，但心里就是感觉膈应。一切就不是那么美好了。仿佛是某个客户要求你把 `ElementUI` 的样式全都大改一遍，以达到他们心中的高端形象。\n\n所以我最终选择的是 `shadcn/vue` + `inspira-ui`\n\n`shadcn/ui` 在 React 那边是很火的，可能有人不知道他也有一个 `vue` 的版本。\n\n![](https://img.zzao.club/article/202505131443401.png)\n\n使用方式是把组件下载到项目本地，所以给了你最大的可控性。\n\n同时里面的有些组件，比如 `sonner` ，用的是 `vue-sonner`，已经是经过很多人验证的，在 toC 领域算是很美观的交互组件。还有 `drawer` 也是类似的情况，我觉得还是蛮方便的，把好用的组件都集合在一起。\n\n`inspira-ui`是对 `shadcn/vue` 的一个补充和升级，主要用来实现一些炫酷的动画、特效。灵感来自于 `Aceternity UI`, `Magic UI`，填补了 `vue` 生态下相关组件的空白。\n\n![](https://img.zzao.club/article/202505131443403.png)\n\n有这两个组件库，外加 tailwindcss ，不管是开发管理系统，还是面向用户的美观页面，都没有发现不够用的地方。\n\n推荐你也去试一试～\n\n\n\n\n",{"title":5,"description":138},"post/nuxt/nuxt-ui-framework-recommend",[17,148],"UI","mGZmfiGAexZ0YXJoaXul7pEzl5lTZj7fJDKKsqIR43Q",[151,155],{"title":152,"path":153,"stem":154},"OpenClaw 安装入门（Windows）","/post/zzao/openclaw/openclaw-install-windows","post/zzao/openclaw/openclaw-install-windows",{"title":156,"path":157,"stem":158},"假设你是AI，你的Skill应该是什么样的","/post/zzao/ai-skill-structure","post/zzao/ai-skill-structure",1779005085849]